Как сделать, чтобы при нажатии крутился объект и появлялся текст?

Question

У меня уже есть код для вращения объект и есть набросок для появления объекта. Но я только не знаю как это все в одно объединить. Заранее спасибо!

<p class="hide-text">enjfkj</p>
 <button class="game-item__button">read review</button>
<script>const btns = document.querySelectorAll('.game-item__button');
for (let btn of btns) {
    // Добавление событие клика для каждой кнопки
    btn.onclick = () => {
        // Получение элемента с текстом из текущего бока
        const text = btn.parentElement.querySelector('.hide-text');
        // Изменение видимости
        text.style.display = (text.style.display === 'none') ? 'block' : 'none';
    };
}
</script>
<img src="http://www.queness.com/resources/images/png/apple_ex.png" id="color">

<style>
  .rotate {
    transform: rotate(360deg);
     transition: all 3s;
  }
</style>

<script>
  color.onclick = function() {
    this.classList.add("rotate")
  }
</script>

Answer 1

Можно что-нибудь такое сделать, в виде карточки...

const btns = document.querySelectorAll('.btn');
const cube = document.querySelector('.cube');


for (let btn of btns) {
  btn.onclick = () => {
    const text = btn.parentElement.querySelector('.hide-text');
    let display = window.getComputedStyle(text).display;
    text.style.display = (display === 'none') ? 'block' : 'none';
    cube.style.display = text.style.display;
    cube.classList.toggle("paused");
  };
}

#cont {
  width: 250px;
  height: 270px;
  text-align: center;
  box-shadow: 0 0 10px 10px rgba(0, 90, 90, 0.1) inset;
  border-radius: 20px;
  padding: 10px;
}

.hide-text {
  display: none;
  margin-bottom: 35px;
  animation: shake 4s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% {
    transform: translate(-7px, 0px) rotate(0deg);
  }
  3% {
    transform: translate(0px, 0px) rotate(0deg);
    text-transform: capitalize;
    font-style: italic;
    color: green;
    text-shadow: 0px 7px 10px green;
    background: radial-gradient(35% 15%, rgba(0,230,90,0.3), rgba(29,35,35,0));
  }
  4% {
    text-transform: lowercase;
    font-style: italic;
  }
  5% {
    text-transform: inherit;
    font-style: normal;
    color: black;
    background: radial-gradient(45% 15%, rgba(0,230,90,0), rgba(29,35,35,0));

  }
  
}

.game-item__button {}

.btn {
  text-align: center;
  border-radius: 5px;
  background: radial-gradient(50% 60%, #650000, #000000);
  color: #FFCC00;
  text-shadow: 0px 1px 1px black, 0 1px 1px black;
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: inset 1px 1px 2px rgba(255, 180, 0, 0.4);
  margin-top: 40px;
  height: 30px;
  line-height: 30px;
  letter-spacing: 5px;
}

.btn:hover {
  box-shadow: inset 1px 1px 1px rgba(255, 215, 0, 0.6);
  background: radial-gradient(75% 65%, #FF3300, #000000);
  opacity: 1;
  color: #FFCC33;
}

.cube {
  transform-style: preserve-3d;
  animation: rotate 10s infinite linear;
  width: 5.5em;
  height: 5.5em;
  padding-bottom: 2.5em;
  margin-left: auto;
  margin-right: auto;
  display: none;
}

.side {
  position: absolute;
  width: 5.5em;
  height: 5.5em;
  border-radius: 0.5em;
  transform-style: preserve-3d;
}

.side:before,
.side:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  transform: translateZ(2em) rotateZ(45deg);
}

.side:before {
  width: 5.5em;
  height: 5.5em;
  box-shadow: 0 0 10px 5px rgba(0, 90, 90, .2) inset;
  border: 2px dotted rgba(0, 90, 90, .2);
  border-radius: 20px;
  box-sizing: border-box;
  transform: translateZ(3em) rotateZ(45deg);
  animation: pulsY 5s infinite linear;
}

.side:after {
  width: 5.5em;
  height: 5.5em;
  box-shadow: 0 0 20px 10px rgba(255, 255, 255, .2) inset;
  border: 4px dotted rgba(255, 255, 255, .2);
  box-sizing: border-box;
  transform: translateZ(10em) rotateZ(45deg);
  animation: pulsZ 5s infinite linear;
}

.back {
  transform: translateZ(-3.5em) rotateY(180deg);
  background: no-repeat url("https://www.dorogavrim.ru/img/flagi/flag_iran.jpg") center / contain;
}

.left {
  transform: translateX(-3.5em) rotateY(-90deg);
  background: no-repeat url("https://www.dorogavrim.ru/img/flagi/flag_serbiya.jpg") center / contain;
}

.right {
  transform: translateX(3.5em) rotateY(90deg);
  background: no-repeat url("https://www.dorogavrim.ru/img/flagi/flag_rossiya.jpg") center / contain;
}

.top {
  transform: translateY(-3.5em) rotateX(90deg);
  background: no-repeat url("https://www.dorogavrim.ru/img/flagi/flag_kitai.jpg") center / contain;
}

.bottom {
  transform: translateY(3.5em) rotateX(-90deg);
  background: no-repeat url("https://www.dorogavrim.ru/img/flagi/flag_indiya.jpg") center / contain;
}

.front {
  transform: translateZ(3.5em);
  background: no-repeat url("https://www.dorogavrim.ru/img/flagi/flag_belarus.jpg") center / contain;
}

.paused {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}

@keyframes rotate {
  100% {
    transform: rotateX(360deg) rotateY(-360deg) rotateZ(360deg);
  }
}

@keyframes pulsZ {
  0% {
    transform: translateZ(2.5em);
  }
  50% {
    transform: translateZ(0em);
  }
  100% {
    transform: translateZ(2.5em);
  }
}

@keyframes pulsY {
  0% {
    transform: translateZ(4.5em);
  }
  50% {
    transform: translateZ(-2em);
  }
  100% {
    transform: translateZ(4.5em);
  }
}

<div id='cont'>
  <p class="hide-text">Game stars</p>
  <div class="cube paused">
    <div class="back side"></div>
    <div class="left side"></div>
    <div class="right side"></div>
    <div class="top side"></div>
    <div class="bottom side"></div>
    <div class="front side"></div>
  </div>
  <div class="btn">Winners</div>
</div>

БЛОГ НА HUSL

Как сделать, чтобы при нажатии крутился объект и появлялся текст?

Ответы (1 шт):