学习笔记——CSS 3D图片翻转

灵活运用CSS3中的transform属性以及perspective属性。

---

 1.效果图：

2.代码：

        <div class="box">
            <div class="box1 box2">正</div>
            <div class="box1 box3">反</div>
        </div>

            .box {
                margin: 100px auto;
                position: relative;
                width: 400px;
                height: 200px;
                border: 10px solid #000000;
                position: relative;
                perspective: 600px;
            }
            .box1 {
                position: absolute;
                left: 0;
                top: 0;
                width: 400px;
                height: 200px;
                line-height: 200px;
                text-align: center;
                font-size: 40px;
                color: white;
                backface-visibility: hidden;
                transition: all .6s;
            }
            .box2 {
                transform: rotateY(0deg);
                background-color: #0000FF;
            }
            .box:hover .box2 { transform: rotateY(180deg); }
            .box3 {
                transform: rotateY(-180deg);
                background-color: #006722;
            }
            .box:hover .box3 { transform: rotateY(0deg); }