CSS3实现卡片3D翻转效果

CSS3实现卡片3D翻转效果

点击查看演示

一、案例分析

1、-webkit-perspective：立体式3D透视效果。

2、transform-style: preserve-3d;属性指定嵌套元素是怎样在三维空间中呈现

3、backface-visibility：hidden;隐藏被旋转的 div元素的背面。

4、当鼠标移动到这个.main:hover div上面时让他旋转180°。

css3 3d一定要有一定的立体感

通过这个图片应该清楚的了解到了x轴 y轴 z轴。

二、HTML源代码

   <div class="main">
       <div class="box b1"></div>
       <div class="box b2"></div>
   </div>

三、CSS源代码

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            perspective: 800px;
            -webkit-perspective: 800px;
            -moz-perspective: 800px;
            transform-style: preserve-3d;
        }
        .main{
            width: 300px;
            height: 300px;
            margin: 200px auto;
            transform-style: preserve-3d;
            position: relative;
            transition: 2s;
        }
        /* 当鼠标移动到上面时让他旋转180° */
        .main:hover{
            transform: rotateY(180deg);
        }
        .box{
            width: 300px;
            height: 300px;
            text-align: center;
            font-size: 100px;
            border-radius: 10px;
            cursor: pointer;
            position: absolute;
            top: 0;
            left: 0;
        }
        .b1{
            background: skyblue;
        }
        .b2{
            background: tomato;
            /* 隐藏旋转 div 元素的背面
            hidden背面是不可见的
            visible背面是可见的
            */
            backface-visibility: hidden;
        }
    </style>

CSS3 backface-visibility 属性定义当元素背面向屏幕时是否可见。如果在旋转元素不希望看到其背面时，该属性很有用。

语法:

backface-visibility: visible|hidden;

visible背面是可见的。

hidden背面是不可见的。