如何在点击时激活旋转而不是悬停是css

Question

我很陌生。我有三个盒子，双方都有信息。他们目前在rotate上hover，但我希望他们rotate只click。我该如何做到这一点？

.flip3D {
  width: 240px;
  height: 200px;
  margin: 10px;
  float: left;
}

.flip3D>.front {
  position: absolute;
  -webkit-transform: perspective( 600px) rotateY( 0deg);
  transform: perspective( 600px) rotateY( 0deg);
  background: #FC0;
  width: 240px;
  height: 200px;
  border-radius: 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: -webkit-transform .5s linear 0s;
  transition: transform .5s linear 0s;
}

.flip3D>.back {
  position: absolute;
  -webkit-transform: perspective( 600px) rotateY( 180deg);
  transform: perspective( 600px) rotateY( 180deg);
  background: #80BFFF;
  width: 240px;
  height: 200px;
  border-radius: 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: -webkit-transform .5s linear 0s;
  transition: transform .5s linear 0s;
}

.flip3D:hover>.front {
  -webkit-transform: perspective( 600px) rotateY( -180deg);
  transform: perspective( 600px) rotateY( -180deg);
}

.flip3D:hover>.back {
  -webkit-transform: perspective( 600px) rotateY( 0deg);
  transform: perspective( 600px) rotateY( 0deg);
}

<div class="flip3D">
  <div class="back">Box 1 - Back</div>
  <div class="front">Box 1 - Front</div>
</div>

Answer 1

这需要一个javascript click事件监听器。您还需要更新CSS以使用新创建的类（.active）而不是:hover进行更改。

＆＃13;

＆＃13;

var box = document.querySelector('.flip3D');

box.addEventListener("click", function() {
  if (box.classList.contains('active')) {
    box.classList.remove('active');
  } else {
    box.classList.add('active');
  }
});

＆＃13;

.flip3D {
  width:240px;
  height:200px;
  margin:10px;
  float:left;
}

.flip3D .front{
 position:absolute;
 -webkit-transform: perspective( 600px ) rotateY( 0deg );
 transform: perspective( 600px ) rotateY( 0deg );
 background:#FC0; width:240px; height:200px; border-radius: 7px;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 transition: -webkit-transform .5s linear 0s;
 transition: transform .5s linear 0s;
}

.flip3D .back{
 position:absolute;
 -webkit-transform: perspective( 600px ) rotateY( 180deg );
 transform: perspective( 600px ) rotateY( 180deg );
 background: #80BFFF; width:240px; height:200px; border-radius: 7px;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 transition: -webkit-transform .5s linear 0s;
 transition: transform .5s linear 0s;
}

.flip3D.active .front{
 -webkit-transform: perspective( 600px ) rotateY( -180deg );
 transform: perspective( 600px ) rotateY( -180deg );
}
.flip3D.active .back{
 -webkit-transform: perspective( 600px ) rotateY( 0deg );
 transform: perspective( 600px ) rotateY( 0deg );
}

＆＃13;

<div class="flip3D">
  <div class="back">Box 1 - Back</div>
  <div class="front">Box 1 - Front</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用:active伪类。但是，active会触发mousedown，mouseup会触发js。不确定这符合您的要求。如果没有，您可能需要使用event handlers的{​​{1}}解决方案。

＆＃13;

＆＃13;

.flip3D {
  width: 240px;
  height: 200px;
  margin: 10px;
  float: left;
}

.flip3D>.front {
  position: absolute;
  -webkit-transform: perspective( 600px) rotateY( 0deg);
  transform: perspective( 600px) rotateY( 0deg);
  background: #FC0;
  width: 240px;
  height: 200px;
  border-radius: 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: -webkit-transform .5s linear 0s;
  transition: transform .5s linear 0s;
}

.flip3D>.back {
  position: absolute;
  -webkit-transform: perspective( 600px) rotateY( 180deg);
  transform: perspective( 600px) rotateY( 180deg);
  background: #80BFFF;
  width: 240px;
  height: 200px;
  border-radius: 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: -webkit-transform .5s linear 0s;
  transition: transform .5s linear 0s;
}

.flip3D:active>.front {
  -webkit-transform: perspective( 600px) rotateY( -180deg);
  transform: perspective( 600px) rotateY( -180deg);
}

.flip3D:active>.back {
  -webkit-transform: perspective( 600px) rotateY( 0deg);
  transform: perspective( 600px) rotateY( 0deg);
}

＆＃13;

<div class="flip3D">
  <div class="back">Box 1 - Back</div>
  <div class="front">Box 1 - Front</div>
</div>

＆＃13;

＆＃13;

＆＃13;