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;
width: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;
width:200px;
height:200px;
background:#ccc;
opacity:.7;
}
li:hover {
opacity:.3;
}
img {
width: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{
width: 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;
width: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;
width:200px;
height:200px;
background:#ccc;
opacity:.7;
}
li:hover {
opacity:.3;
}
img {
width: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>
这里面的图片就自己定义就好了，只要路径不出错，就行。
标签：魔幻,translateZ,100px,transform,旋转,rotateX,rotateY,animation,3D 来源： https://www.cnblogs.com/pingfandezhuanji/p/12448727.html