3D魔幻旋转

对于小白来说，一个炫酷的装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>

这里面的图片就自己定义就好了，只要路径不出错，就行。