对于小白来说，一个炫酷的装x特效是必不可少的，下面教你5分钟成功装x。
效果图如下：
很简单，首先我们先定义一个ul标签，然后在里面插入li标签，如下：
<ul>
<li class="top"><img src="C:/Users/User/Desktop/3D-rotate/image/timg1.jpg"></li>
<li class="bottom"><img src="C:/Users/User/Desktop/3D-rotate/image/timg2.jpg"></li>
<li class="left"><img src="C:/Users/User/Desktop/3D-rotate/image/timg3.jpg"></li>
<li class="right"><img src="C:/Users/User/Desktop/3D-rotate/image/timg4.jpg"></li>
<li class="front"><img src="C:/Users/User/Desktop/3D-rotate/image/timg5.jpg"></li>
<li class="back"><img src="C:/Users/User/Desktop/3D-rotate/image/timg6.jpg"></li>
</ul>
这样就有了雏形，接下来就是css了。如下：
* { margin:0; padding:0 } ul { transform-style:preserve-3d; 200px; height:200px; position:relative; margin:150px auto; list-style:none; animation-name:xz; animation-duration:20s; animation-iteration-count:infinite; animation-timing-function:linear; } ul:hover { animation-play-state:paused; } li { position:absolute; left:0; top:0; 200px; height:200px; background:#ccc; opacity:.7; } li:hover { opacity:.3; } img { 100%; height:100%; } .top { transform:rotateX(90deg) translateZ(100px); } .bottom { transform:rotateX(90deg) translateZ(-100px); } .left { transform:rotateY(90deg) translateZ(100px); } .right { transform:rotateY(90deg) translateZ(-100px); } .front { transform:translateZ(100px); } .back { transform:translateZ(-100px); } @keyframes xz { 0% { transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 100% { transform:rotateX(360deg) rotateY(720deg) rotateZ(1080deg); } }
这样就基本上可以了。然后我再加了一些自己的东西，所以完整代码如下：
<!DOCTYPE html> <html lang="en"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <title>易木</title> <div id="divTyping"></div> <ul> <li class="top"><img src="C:/Users/User/Desktop/3D-rotate/image/timg1.jpg"></li> <li class="bottom"><img src="C:/Users/User/Desktop/3D-rotate/image/timg2.jpg"></li> <li class="left"><img src="C:/Users/User/Desktop/3D-rotate/image/timg3.jpg"></li> <li class="right"><img src="C:/Users/User/Desktop/3D-rotate/image/timg4.jpg"></li> <li class="front"><img src="C:/Users/User/Desktop/3D-rotate/image/timg5.jpg"></li> <li class="back"><img src="C:/Users/User/Desktop/3D-rotate/image/timg6.jpg"></li> </ul> <style> #divTyping{ 315px; height: 280px; background-color: black; position: fixed; left: 300px; background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow); -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-size:22px; } .gradient-text-two{ color:red; } * { margin:0; padding:0 } ul { transform-style:preserve-3d; 200px; height:200px; position:relative; margin:150px auto; list-style:none; animation-name:xz; animation-duration:20s; animation-iteration-count:infinite; animation-timing-function:linear; } ul:hover { animation-play-state:paused; } li { position:absolute; left:0; top:0; 200px; height:200px; background:#ccc; opacity:.7; } li:hover { opacity:.3; } img { 100%; height:100%; } .top { transform:rotateX(90deg) translateZ(100px); } .bottom { transform:rotateX(90deg) translateZ(-100px); } .left { transform:rotateY(90deg) translateZ(100px); } .right { transform:rotateY(90deg) translateZ(-100px); } .front { transform:translateZ(100px); } .back { transform:translateZ(-100px); } @keyframes xz { 0% { transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 100% { transform:rotateX(360deg) rotateY(720deg) rotateZ(1080deg); } } </style> </head> <body> <span></span> </body> <script > var str = " 手机有手机套保护，电视有电视罩保护，眼镜有眼镜盒保护，文具有铅笔袋保护，小草有大树保护，水滴有大海保护，雅典娜有圣斗士保护，红太郎有灰太狼保护，我只想做你的保护神，无论花开花落，云卷云舒，我会一直陪在你身边！ ----易木" var i = 0; function typing(){ var divTyping = document.getElementById('divTyping') if(i<=str.length){ divTyping.innerHTML = str.slice(0,i++) + "_"; setTimeout("typing()",400) }else{ divTyping.innerHTML = str; } } typing(); </script> </html>
这里面的图片就自己定义就好了，只要路径不出错，就行。