Question

我一直关注Adam Khoury关于如何使用悬停伪类制作3d翻转动画的教程，但是我很难用java脚本激活过渡。我的目标是单击该框以激活过渡。

https://www.youtube.com/watch?v=W3eJWpvIl0g

Html:

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

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

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



CSS:

.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 ); }

谢谢！

Answer 1

您可以使用jQuery。单击该框后触发悬停事件。

试试这个

$('.box').click(function () {
  $('.animationElement').trigger('hover');
}

这将激活元素的悬停事件。更多的CSS将采取行动，并将触发动画。

或者你可以使用className并将classname附加到元素。

$('.box').click(function () {
  $('.animationElement').attr('class', 'flip3D');
}

然后CSS会完成这项工作。

激活CSS翻转过渡

1 个答案: