卡牌3D翻转效果
在CSS3的3D世界中,默认情况下,我们是可以看到背后的元素。
因此,为了切合实际,我们常常会这样设置,使后面元素不可见:
-webkit-backface-visibility:hidden; /*注意:safari浏览器必须用webkit前缀*/
backface-visibility:hidden;
html
<div class="container"> <div class="flip"> <div class="font"><img src="../Carousel/images/2.jpg" alt=""></div> <div class="back"><img src="../Carousel/images/9.jpg" alt=""></div> </div> </div>
css
1 .container { 2 perspective: 1000px; 3 transform-style: preserve-3d; 4 } 5 .container,.font,.back { 6 width: 380px; 7 height: 270px; 8 } 9 .flip { 10 position: relative; 11 transition: all .6s; 12 transform-style: preserve-3d; 13 } 14 .font,.back { 15 backface-visibility: hidden;/*为了让图画翻转时不露出背面*/ 16 position: absolute; 17 top:0; 18 left:0; 19 } 20 img { 21 width: 100%; 22 height: 100%; 23 object-fit: cover; 24 } 25 .font { 26 z-index: 1; 27 } 28 .back { 29 transform: rotateY(-180deg); 30 } 31 .container:hover .flip { 32 transform: rotateY(180deg); 33 }
当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身
注:perspective 属性只影响 3D 转换元素
也可以添加自定义动画
把原来的transition动画
.container:hover .flip { transform: rotateY(180deg); }
改为animation动画
.container:hover .flip{ animation: backRotate 2s linear both; } @keyframes backRotate{ 0%,30%{ transform: rotateY(-180deg); } 15%,45%{ transform: rotateY(-150deg); } 100%{ transform: rotateY(0deg); } }