纯CSS3实现3D翻转效果 关键属性 perspective 和 transform-style

要使用嵌套一个div实现

<div class="block">
    <div class="block-in"></div>
</div>

外层要加上 transform-style 和 perspective （视距）才能实现里层的元素3D效果

.block {
  width: 200px;
  height: 200px;
  cursor: pointer;
  /* 3D变形 */
  transform-style: preserve-3d;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
  
  &-in {
    background: brown;
    height: 100%;
    transition: 0.8s;
  }
  
  &:hover .block-in {
    transform: rotateY(180deg);
  }
}

如果需要实现在翻转后看到背面的元素，还需要将两个元素放到block-in元素里面，使两层重叠，在上面一层元素 上使用 backface-visibility: hidden 属性，使之在翻转后不面向屏幕时隐藏起来；并在里面的元素同时使用 transition: transform .5s; transform: rotateY(0deg); 动画

<div class="block">
    <div class="block-in">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</div>

CSS提示：
翻转前：
box1:transition: transform .5s; transform: rotateY(0deg);
box2:transition: transform .5s; transform: rotateY(0deg); backface-visibility:hidden;

翻转后(box2翻转到90度以后就会隐藏掉，只显示box1了)：
box1:transition: transform: rotateY(180deg);
box2:transition: transform: rotateY(180deg);

版权属于：Joyber

本文链接：https://blog.qqvbc.com/default/298.html

转载时须注明出处及本声明