大致效果
（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 版权协议，转载请附上原文出处链接和本声明。