3D翻转动画

素颜马尾好姑娘i 2022-05-30 11:08 391阅读 0赞

**大致效果**  
![这里写图片描述][70]

![这里写图片描述][70 1]

![这里写图片描述][70 2]

--------------------

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

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

（2）. 有四个图片（不要用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>

[70]: /images/20220530/7230c5672b53404b9c8db4167bdf21e2.png
[70 1]: /images/20220530/632b3213b5644d6698629540d99c7c30.png
[70 2]: /images/20220530/5a83bbe30868432b8fcfe070b118496a.png