3D魔幻旋转

2020-03-09 15:04:26 阅读：260 来源： 互联网

标签：魔幻 translateZ 100px transform 旋转 rotateX rotateY animation 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

3D魔幻旋转