console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D</title>
</head>
<style>
*{margin:0;}
.sp{perspective:200px;}
.sp{width:200px;height:200px;background:#f99;margin:20px;transition:3s;}
.sp:hover{transform:rotateY(60deg);}
.box{width:200px;height:200px;margin-top:20px;position:relative;transition:10s;transform-style:preserve-3d;transform:rotateX(80deg) rotateY(45deg);}
.box p{width:200px;height:200px;position:absolute;}
.box .p1{background:#f99;transform:translateZ(100px);}
.box .p2{background:#99f;transform:translateY(100px) rotateX(-90deg);}
.box .p3{background:red;transform:translateZ(-100px)}
.box .p4{background:blue;transform:translateY(-100px) rotateX(-90deg);}
.box:hover{transform:rotateX(360deg);}
li{list-style:none;}
.lft{width:200px;height:200px;margin:50px;transition:6s;transform-style:preserve-3d;}
.lft ul{width:200px;height:200px;position:relative;
transform-style:preserve-3d;transform:rotateX(55deg) rotateY(45deg);}
.lft ul li{width:200px;height:200px;position:absolute;opacity:0;}
.lft ul li.left{background:#f99;opacity:.5;
transform:translateX(-100px) rotateY(90deg);}
.lft ul li.right{background:#99f;opacity:.5;
transform:translateX(100px) rotateY(90deg);}
.lft ul li.top{background:#9f9;opacity:.5;
transform:translateY(-100px) rotateX(90deg); }
.lft ul li.bottom{background:#f9f;opacity:.5;
transform:translateY(100px) rotateX(90deg); }
.lft ul li.before{background:#f80;opacity:.5;transform:translateZ(100px);}
.lft ul li.after{background:#0ff;opacity:.5;transform:translateZ(-100px);}
.lft:hover{transform:rotateY(360deg);}
.wy{width:200px;height:200px;background:#f99;margin:20px;transition:3s;transform:perspective(400px);}
.wy:hover{transform:perspective(400px) translateZ(400px);}
dl{width:200px;height:200px;margin:200px;box-shadow:0 0 5px #000;position:relative;}
dl dd{width:196px;height:196px;position:absolute;}
dl dd.d1{border:2px solid #f99;}
dl dd.d2{border:2px solid #9f9;}
dl dd.d3{border:2px solid #f9f;}
dl dd.d4{border:2px solid #ff9;}
dl dd.d5{border:2px solid #9ff;}
dl:hover dd.d1{animation:fangda 2s linear infinite;}
dl:hover dd.d2{animation:fangda 2s -.4s linear infinite;}
dl:hover dd.d3{animation:fangda 2s -.8s linear infinite;}
dl:hover dd.d4{animation:fangda 2s -1.2s linear infinite;}
dl:hover dd.d5{animation:fangda 2s -1.6s linear infinite;}
dl dt{width:200px;height:200px;background:#666;color:#fff;text-align:center;font:30px/200px "";position:absolute;}
@keyframes fangda{
0%{transform:scale(1);}
100%{transform:scale(2);}
}
.box2{width:500px;height:500px;border:1px solid #000;margin:50px;position:relative;}
.box2 p{width:100px;height:100px;background:#0f0;position:absolute;
animation:chulian 2s linear 3 forwards;
}
.box2:hover p{animation-play-state:paused;}
@keyframes chulian{
0%{left:0;top:0;}
100%{left:400px;top:0;}
}
.fsq{perspective:900px;transform-style:preserve-3d;}
.fsq ul{width:200px;height:100px;margin:200px auto;
position:relative;animation:zhuan linear 6s infinite;transform-style:preserve-3d;transform:rotateX(0deg);}
.fsq ul li{width:200px;height:100px;position:absolute;transition:.5s;}
.fsq ul li img{width:200px;height:100px;}
.fsq ul li.li1{transform:translateZ(300px);}
.fsq ul li.li2{transform:rotateY(45deg) translateZ(300px);}
.fsq ul li.li3{transform:rotateY(90deg) translateZ(300px);}
.fsq ul li.li4{transform:rotateY(135deg) translateZ(300px);}
.fsq ul li.li5{transform:rotateY(180deg) translateZ(300px);}
.fsq ul li.li6{transform:rotateY(225deg) translateZ(300px);}
.fsq ul li.li7{transform:rotateY(270deg) translateZ(300px);}
.fsq ul li.li8{transform:rotateY(315deg) translateZ(300px);}
.fsq ul:hover{animation-play-state:paused;}
.fsq ul li.li1:hover{transform:translateZ(400px) scale(1.4);}
.fsq ul li.li2:hover{transform:rotateY(45deg) translateZ(400px) scale(1.4);}
.fsq ul li.li3:hover{transform:rotateY(90deg) translateZ(400px) scale(1.4);}
.fsq ul li.li4:hover{transform:rotateY(135deg) translateZ(400px) scale(1.4);}
.fsq ul li.li5:hover{transform:rotateY(180deg) translateZ(400px) scale(1.4);}
.fsq ul li.li6:hover{transform:rotateY(225deg) translateZ(400px) scale(1.4);}
.fsq ul li.li7:hover{transform:rotateY(270deg) translateZ(400px) scale(1.4);}
.fsq ul li.li8:hover{transform:rotateY(315deg) translateZ(400px) scale(1.4);}
@keyframes zhuan{
0%{transform:rotateX(0deg) rotateY(0);}
100%{transform:rotateX(0deg) rotateY(360deg);}
}
.box3{width:500px;height:200px;border:1px solid #000;margin:20px;
overflow:hidden;}
.box3 ul{width:10000%;animation:lunbo 5s infinite linear;}
.box3 ul li{float:left;width:300px;height:200px;}
.box3 ul li img{width:300px;height:200px;}
.box3:hover ul{animation-play-state:paused;}
@keyframes lunbo{
0%{margin-left:0;}
100%{margin-left:-1500px;}
}
</style>
<body>
<div class="sp">水平翻转</div>
<div>3d旋转</div>
<div class="box">
<p class="p1">1</p>
<p class="p2">2</p>
<p class="p3">3</p>
<p class="p4">4</p>
</div>
<div>3d立方体旋转</div>
<div class="lft">
<ul>
<li class="left"></li>
<li class="right"></li>
<li class="top"></li>
<li class="bottom"></li>
<li class="before"></li>
<li class="after"></li>
</ul>
</div>
<div>
3d位移
</div>
<div class="wy">3d位移</div>
<div>
波纹
</div>
<dl>
<dd class="d1"></dd>
<dd class="d2"></dd>
<dd class="d3"></dd>
<dd class="d4"></dd>
<dd class="d5"></dd>
<dt>你摸我呀！</dt>
</dl>
<div>
动画移动
</div>
<div class="box2">
<p></p>
</div>
<div>
分手墙
</div>
<div class="fsq">
<ul>
<li class="li1"><img src="https://t7.baidu.com/it/u=3676218341,3686214618&fm=193&f=GIF" /></li>
<li class="li2"><img src="https://t7.baidu.com/it/u=3930750564,2979238085&fm=193&f=GIF" /></li>
<li class="li3"><img src="https://t7.baidu.com/it/u=3522949495,3570538969&fm=193&f=GIF" /></li>
<li class="li4"><img src="https://t7.baidu.com/it/u=2878377037,2986969897&fm=193&f=GIF" /></li>
<li class="li5"><img src="https://t7.baidu.com/it/u=3038817810,32670274&fm=193&f=GIF" /></li>
<li class="li6"><img src="https://t7.baidu.com/it/u=475796824,1397609323&fm=193&f=GIF" /></li>
<li class="li7"><img src="https://t7.baidu.com/it/u=2253011977,2934623845&fm=193&f=GIF" /></li>
<li class="li8"><img src="https://t7.baidu.com/it/u=434014116,2108959724&fm=193&f=GIF" /></li>
</ul>
</div>
<div>
无缝轮播
</div>
<div class="box3">
<ul>
<li ><img src="https://t7.baidu.com/it/u=3676218341,3686214618&fm=193&f=GIF" /></li>
<li ><img src="https://t7.baidu.com/it/u=3930750564,2979238085&fm=193&f=GIF" /></li>
<li ><img src="https://t7.baidu.com/it/u=3522949495,3570538969&fm=193&f=GIF" /></li>
<li ><img src="https://t7.baidu.com/it/u=2878377037,2986969897&fm=193&f=GIF" /></li>
<li ><img src="https://t7.baidu.com/it/u=3038817810,32670274&fm=193&f=GIF" /></li>
<li ><img src="https://t7.baidu.com/it/u=475796824,1397609323&fm=193&f=GIF" /></li>
<li ><img src="https://t7.baidu.com/it/u=2253011977,2934623845&fm=193&f=GIF" /></li>
<li ><img src="https://t7.baidu.com/it/u=434014116,2108959724&fm=193&f=GIF" /></li>
</ul>
</div>
</body>
</html>