博客

3D翻转动画

  • Post author:
  • Post category:其他



大致效果


这里写图片描述

这里写图片描述

这里写图片描述

（1）. 搭框架：一个div盒子， 点状线边框，圆角 

border : 3px dotted blue;
border-radius:20px;

（2）. 有四个图片（不要用div，不利于搜索引擎抓取）引入图片 

<div class="frame">
            <ul>
                <li>
                    <img src="img/a_1.jpg"/>
                </li>
                <li>
                    <img src="img/a_2.jpg"/>
                </li>
                <li>
                    <img src="img/a_3.jpg"/>
                </li>
                <li>
                    <img src="img/a_4.jpg"/>
                </li>
            </ul>
        </div>

（3）.让四个图片在一行，并且去掉li前面的圆点。图片水平均分，垂直均分。 

display:flex;//开启弹性盒模型
justify-content:space-around;//弹性子元素水平均分
align-items:center;//弹性子元素竖直均分

（ 4）.做文字卡片。 

        <div class="frame">
            <ul>
                <li>
                    <img src="img/a_1.jpg"/>
                    <div>
                        <h3>珍珍</h3>
                        <p>密码的强度必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8~10之间密码的强度必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8~10之间</p>
                    </div>
                </li>
                <li>
                    <img src="img/a_2.jpg"/>
                    <div>
                        <h3>洋洋</h3>
                        <p>密码的强度必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8~10之间密码的强度必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8~10之间</p>
                    </div>
                </li>
                <li>
                    <img src="img/a_3.jpg"/>
                    <div>
                        <h3>珍珍</h3>
                        <p>密码的强度必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8~10之间密码的强度必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8~10之间</p>
                    </div>
                </li>
                <li>
                    <img src="img/a_4.jpg"/>
                    <div>
                        <h3>洋BB</h3>
                        <p>密码的强度必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8~10之间密码的强度必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8~10之间</p>
                    </div>
                </li>
            </ul>
        </div>

（ 5）. 用margin-top来让图片和文字卡片重合 

margin-top:-303px;

（ 6）.文字卡片逆时针旋转90度，鼠标移上去就到0度 

transform:rotateY(-90deg);
transition:.5s;

ul li:hover div{
                transform:rotateY(0deg);
            }

（7）.图片开始的时候0度鼠标上去后到90度 

img{
    transform:rotateY(0deg);
    transition:.5s;
            }
ul li:hover img{
                transform:rotateY(90deg);
            }

（8）.给大的盒子加摄像头，定义go动画 

animation:go 5s infinite linear;
@keyframes go{
                0%{transform:rotateX(45deg)}
                50%{transform:rotateX(-45deg)}
                100%{transform:rotateX(45deg)}
            }

（9）.鼠标移上去取消动画 

animation-play-state:paused;


完整代码如下
 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>前端小案例之3D翻转动画</title>
        <style type="text/css">
        *{
            margin:0;
            padding :0;
        }
        body{
            perspective:800px;
        }
            .frame{
                    width :1000px;
                height :400px;
                border : 3px dotted blue;
                border-radius:20px;
                margin:120px auto;
                animation:go 5s infinite linear;

            }
            .frame:hover{
                    animation-play-state:paused;
            }
            ul{
                display:flex;
                list-style:none;
                /*justify-content:space-around;
                align-items:center;*/
                background-color:rosybrown;
                height : 400px;
            }
            li div{
                margin-top:-303px;  
                width :220px;
                height : 300px;
                background-color : green;
                color:#fff;
                transform:rotateY(-90deg);
                transition:.5s;
            }
            ul li{
                margin:auto;
                width :220px;
                height : 300px;
                transform-style:preserve-3d;
            }
            li div h3{
                text-align:center;
                line-height:88px;
                font-size:26px;
            }
            li div p{
                text-indent:2em;
                font-weight:600;
            }
            ul li:hover div{
                transform:rotateY(0deg);
            }
            ul li:hover img{
                transform:rotateY(90deg);
            }
            img{
                transform:rotateY(0deg);
                transition:.5s;
            }
            @keyframes go{
                0%{transform:rotateX(45deg)}
                50%{transform:rotateX(-45deg)}
                100%{transform:rotateX(45deg)}
            }
        </style>
    </head>
    <body>
        <div class="frame">
            <ul>
                <li>
                    <img src="img/a_1.jpg"/>
                    <div>
                        <h3>珍珍</h3>
                        <p>密码的强度必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8~10之间密码的强度必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8~10之间</p>
                    </div>
                </li>
                <li>
                    <img src="img/a_2.jpg"/>
                    <div>
                        <h3>洋洋</h3>
                        <p>密码的强度必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8~10之间密码的强度必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8~10之间</p>
                    </div>
                </li>
                <li>
                    <img src="img/a_3.jpg"/>
                    <div>
                        <h3>珍珍</h3>
                        <p>密码的强度必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8~10之间密码的强度必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8~10之间</p>
                    </div>
                </li>
                <li>
                    <img src="img/a_4.jpg"/>
                    <div>
                        <h3>洋BB</h3>
                        <p>密码的强度必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8~10之间密码的强度必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8~10之间</p>
                    </div>
                </li>
            </ul>
        </div>
    </body>
</html>


版权声明：本文为Carrie_zzz原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。