本帖最后由 seattle^-^ 于 2019-12-22 21:49 编辑
最近浏览网页的时候发现某位大神的网页有一个立体3D旋转特效，感觉十分炫酷，就学了学。照着葫芦画瓢，源码分享一下。
先来效果图
哈哈，其实这是个动画特效。笔者比较菜，不大会GIF。所以各位脑补一下哈。
动画一直在旋转，一开始是一个关闭的立方体，鼠标移动到立方体以后立方体就会展开。一直在旋转，可以把图片换成任意想要的，我个人当初看到的特效就是狐妖，所以我也做成狐妖的样子了。
具体的实现的方法也很简单，HTML标签加上CSS层叠样表。跟大家分享一下，有兴趣的来啊。
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3立方体3D旋转</title>
<style type="text/css">
*{/*全体元素样表*/
margin:0 auto;/*外边框为0*/
padding:0;/*内边框为0*/
}
@keyframes rotate{/*动画 旋转 规则与animation*/
0%{/*初始*/
transform:rotateX(0deg) rotateY(0deg);/*绕XY轴转*/
}
100%{/*结束*/
transform:rotateX(360deg) rotateY(360deg);/*绕X轴转,绕Y轴旋转*/
}
}
html{/*标签选择器*/
background-color: gray;/*背景颜色灰色*/
}
.wrap{/*类选择器*/
margin-top:200px;/*上外边距*/
perspective: 1000px; /*视图(你的屏幕)距元素的距离,也就是观看的距离*/
}
.cube{/*类选择器*/
width:200px;/*宽度*/
height:200px;/*高度*/
position:relative;/*选择定位相对初始位置定位*/
transform-style:preserve-3d; /*默认flat 2D*//*设置3D空间中呈现*/
transform:rotateX(-30deg) rotateY(-70deg); /*绕X轴旋转,绕Y轴旋转*/
animation:rotate 20s infinite linear;/*绑定选择器keyframe的名称rotate,完成动画的时间20s,infinite设置循环,效果为匀速 规则与keyframes*/
}
.cube > div{/*选择父元素为.cube的所有div元素*/
width:100%;/*宽度*/
height:100%;/*高度*/
position:absolute;/*选择定位为绝对定位*/
opacity:0.85;/*不透明度 0(完全透明) 1(完全不透明)*/
transition:transform 0.4s ease-in;/*过渡效果的CSS属性的名称,完成过渡效果需要的时间,速度越来越快（ease-in-out先快后慢，linear匀速）*/
}
.cube > span{/*选择父元素为.cube的所有span元素*/
width:50%;/*宽度*/
height:50%;/*高度*/
position:absolute;/*选择定位为绝对定位*/
top:50px;/*顶部边缘*/
left:50px;/*左边缘*/
}
.out-front{/*前 选择.cube元素内部所有的.out-front元素*//*下同 */
transform: translateZ(100px);/*沿Z轴移动*/
}
.out-back{/*后*/
transform: translateZ(-100px) rotateY(180deg);/*沿着Z轴移动，绕Y轴旋转*/
}
.out-left{/*左*/
transform: translateX(-100px) rotateY(-90deg);/*沿着X轴移动，绕Y轴旋转*/
}
.out-right{/*右*/
transform: translateX(100px) rotateY(90deg);/*沿着X轴移动，绕Y轴旋转*/
}
.out-top{/*上*/
transform: translateY(-100px) rotateX(90deg);/*沿着Y轴移动，绕X轴旋转*/
}
.out-bottom{/*下*/
transform: translateY(100px) rotateX(-90deg);/*沿着Y轴移动，绕X轴旋转*/
}
.in-front{/*前 选择.cube元素内部所有的.in-front元素*//*下同 */
transform: translateZ(50px);/*沿着Z轴移动*/
}
.in-back{/*后*/
transform: translateZ(-50px) rotateY(180deg);/*沿着Z轴移动，绕Y轴旋转*/
}
.in-left{/*左*/
transform: translateX(-50px) rotateY(-90deg);/*沿着X轴移动，绕Y轴旋转*/
}
.in-right{/*右*/
transform: translateX(50px) rotateY(90deg);/*沿着X轴移动，绕Y轴旋转*/
}
.in-top{/*上*/
transform: translateY(-50px) rotateX(90deg);/*沿着Y轴移动，绕X轴旋转*/
}
.in-bottom{/*下*/
transform: translateY(50px) rotateX(-90deg);/*沿着Y轴移动，绕X轴旋转*/
}
.cube:hover .out-front{/*前 选择鼠标浮动的.wrap元素内部所有的.out-front元素*//*下同 */
transform: translateZ(200px);/*沿着Z轴移动*/
}
.cube:hover .out-back{/*后*/
transform: translateZ(-200px) rotateY(180deg);/*沿着Z轴移动，绕Y轴旋转*/
}
.cube:hover .out-left{/*左*/
transform: translateX(-200px) rotateY(-90deg);/*沿着X轴移动，绕Y轴旋转*/
}
.cube:hover .out-right{/*右*/
transform: translateX(200px) rotateY(90deg);/*沿着X轴移动，绕Y轴旋转*/
}
.cube:hover .out-top{/*上*/
transform: translateY(-200px) rotateX(90deg);/*沿着Y轴移动，绕X轴旋转*/
}
.cube:hover .out-bottom{/*下*/
transform: translateY(200px) rotateX(-90deg);/*沿着Y轴移动，绕X轴旋转*/
}
div img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="wrap">
<div class="cube">
<!-- 外立方体 -->
<div class="out-front"><img src="i/qw.jpg" /></div>
<div class="out-back"><img src="i/hw.jpg" /></div>
<div class="out-left"><img src="i/zw.jpg" /></div>
<div class="out-right"><img src="i/yw.jpg" /></div>
<div class="out-top"><img src="i/sw.jpg" /></div>
<div class="out-bottom"><img src="i/xw.jpg" /></div>
<!-- 内立方体 -->
<span class="in-front"><img src="i/qn.jpg" /></span>
<span class="in-back"><img src="i/hn.jpg" /></span>
<span class="in-left"><img src="i/zn.jpg" /></span>
<span class="in-right"><img src="i/yn.jpg" /></span>
<span class="in-top"><img src="i/sn.jpg" /></span>
<span class="in-bottom"><img src="i/xn.jpg" /></span>
</div>
</div>
</body>
</html>
全部的代码就这些了，怕你们看不懂。我每一行都加了注释哈，累死。其实全部的代码框架还是从网上参考来的，如有雷同，敬请原谅。
不会用的留言啊换上女朋友的照片。他也香啊。
| 
[复制链接]
发表于 2019-12-22 20:18
|
发表于 2019-12-22 20:52
啊？不详细么？我每一行都加注释了的。
