CSS3图片翻转动画技术详解

前端开发作者： 2024-08-20 18:05:01

CSS动画非常的有趣；这种技术的美就在于，通过使用很多简单的属性，你能创建出漂亮的消隐效果。其中代表性的一种就是CSS图片翻转效果，能让你看到一张卡片的正反两面上的内容。本文就是要用最简单的方法向大家

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    ="flipper">
        ="front">
            <!-- 前面内容 -->
        </div="back" 背面内容 >
>

/* entire container,keeps perspective */
.flip-container {
    perspective: 1000;
}
     flip the pane when hovered 
    .flip-container:hover .flipper,.flip-container.hover .flipper {
        transform: rotateY(180deg);
    }

.flip-container,.front,.back {
    width: 320px;
    height: 480px;
}

 flip speed goes here 
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

 hide back of pane during swap 
.front,1)">
    backface-visibility: hidden; absolute;
    top: 0;
    left: 0;
}

 front pane,placed above back 
.front {
    z-index: 2;
}

 back,initially hidden pane 
.back {
    transform: rotateY(180deg);
}

在最外层的容器元素上设置整个动画区域的透视(perspective)属性。
当外层容器元素遇到鼠标悬停事件时，内部存放卡片的容器旋转180度。这里也是控制旋转速度的地方。如果将旋转值设置为-180deg，是反向旋转。
表示卡片正面和背面的元素都要绝对定位，这样它们才能在相同的位置相互遮挡。它们的背面可视性(backface-visibility)属性设置为隐藏，这样每个卡片的背面在翻转时都是看不见的。
将卡片的正面设置为一个比背面要高的z-index值，这样保证卡片的正面在最上面。
将背面卡片旋转180度，这样让它扮演背面的角色。

.flip-container:hover .flipper,.flip-container.hover .flipper,.flip-container.flip .flipper { rotateY(180deg);
}

.vertical.flip-container {
    position: relative;
}

    .vertical .back { rotateX(180deg);
    }

    .vertical.flip-container .flipper {
        transform-origin: 100% 213.5px;  高的一半 */
    }

    .vertical.flip-container:hover .flipper { rotateX(-180deg);
    }

 1000; preserve-3d;
}
      UPDATED! flip the pane when hovered 
    .flip-container:hover .back { rotateY(0deg);
    }
    .flip-container:hover .front {  UPDATED! front pane,1)"> 2; rotateY(0deg);
}

 rotateY(-180deg);
}

 
    Some vertical flip updates 

.vertical.flip-container {

    .vertical.flip-container:hover .back { rotateX(0deg);
    }

    .vertical.flip-container:hover .front { rotateX(180deg);
    }