css翻牌原理及实现

最新推荐文章于 2022-11-24 16:30:56 发布

weixin_41837346

最新推荐文章于 2022-11-24 16:30:56 发布

阅读量293

点赞数

分类专栏： css 文章标签： css3

本文链接：https://blog.csdn.net/weixin_41837346/article/details/103566480

版权

本文介绍了CSS3实现翻牌效果的原理，包括两张图片层叠、翻转角度设置、backface-visibility属性的应用、perspective的使用，以及通过点击或悬浮事件切换状态，利用transition实现平滑过渡。还提到了简易版实现中img元素的处理和Chrome浏览器的兼容性问题。

摘要由CSDN通过智能技术生成

原理

两张图片层叠到一起，一张图片翻转0度，一张翻转180度（状态一）（定位布局）
backface-visibility，设置图片翻转后隐藏
perspective（父容器），增加3d透视
点击或悬浮事件，切换不同状态（状态二：两张图片皆翻转180度)
transition，切换状态时，用过渡模拟翻牌效果

实现（简易版，未做兼容，可用Chrome测试）

<html>

<head>
    <title>3D翻牌效果 </title>
    <meta charset="UTF-8">
    <style type="text/css">
        .content {
    
            position: relative;
            margin: 150px 0 0 150px;
            width: 225px;
            height: 225px;
            perspective: 800px;
        }

        .content div {
    
            position: absolute;
            left: 0;
            height: 0;
            width: 100%;
            height: 100%;
            color: #fff;

            transition: .8s ease-in-out;
            backface-visibility: hidden;
        }

        img {
    
            width: 100%;
            height: 100%;
        }

        .div1 {
    
            transform: rotateY(0);
        }

        .div2 {
    
            transform: rotateY(180deg