zoukankan      html  css  js  c++  java
  • flip 翻转效果 css3实现

    1.实现代码

    <!DOCTYPE html>
    <html lang="zh">
    
        <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <meta http-equiv="X-UA-Compatible" content="ie=edge" />
            <title>flip 翻转效果css3实现</title>
            <style type="text/css">
                .container {
                    perspective: 1000;
                    transform-style: preserve-3d;
                }
                
                .container,
                .front,
                .back {
                    width: 80px;
                    height: 80px;
                }
                
                .flip {
                    position: relative;
                    transition: 0.6s;
                    transform-style: preserve-3d;
                }
                
                .front,
                .back {
                    position: absolute;
                    top: 0;
                    left: 0;
                    backface-visibility: hidden;
                }
                
                .front {
                    z-index: 2;
                }
                
                .back {
                    transform: rotateY(-180deg)
                }
                
                .container:hover .flip {
                    transform: rotateY(180deg);
                }
            </style>
        </head>
    
        <body>
            <div class="container">
                <div class="flip">
                    <div class="front">
                        <img src="img/area.png" />
                    </div>
                    <div class="back">
                        <img src="img/go.png" />
                    </div>
                </div>
            </div>
        </body>
    
    </html>

    2、效果

    3、说明

    实现技术主要为:transition和transform。

    其中rotateY的参数为正值时旋转方向为“离开屏幕朝向人的方向”

  • 相关阅读:
    链表的常用操作
    android简易论坛的制作
    Bmob后端云的使用
    马哥第九周
    马哥第八周
    马哥第七周
    马哥第六周
    马哥第五周
    马哥第四周
    马哥第三周
  • 原文地址:https://www.cnblogs.com/mengfangui/p/9829034.html
Copyright © 2011-2022 走看看