最近做一个网站，想弄一个炫酷的效果，所以想到了用CSS3做一个图片3D旋转的效果。【实际就是做一个3D动态旋转相册，自己发挥哦】
下面直接上代码了。
-------------------start------------------------------
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css3制作的3d立体旋转动画效果-jq22.com</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
ul{
list-style: none;
width: 200px;
height: 150px;
margin: 70px auto;
/* 父盒子开启3d */
transform-style: preserve-3d;
/* 引入动画效果 */
animation: rotate 3s linear infinite;
}
@keyframes rotate {
/* 旋转沿x轴旋转-10度,再绕y轴旋转 */
0%{
transform: rotateX(-10deg) rotateY(0deg)
}
100%{
transform: rotateX(-10deg) rotateY(360deg)
}
}
ul li img{
/* 图片和父盒子一样大 */
width: 100%;
height: 100%
}
ul li{
/* 绝对定位,先让li标签重叠 */
position: absolute;
}
ul li:nth-child(1){
/* 先绕y轴旋转60度,再沿z轴平移200px,就会形成立体感 */
transform: rotateY(60deg) translateZ(200px)
}
ul li:nth-child(2){
transform: rotateY(120deg) translateZ(200px)
}
ul li:nth-child(3){
transform: rotateY(180deg) translateZ(200px)
}
ul li:nth-child(4){
transform: rotateY(240deg) translateZ(200px)
}
ul li:nth-child(5){
transform: rotateY(300deg) translateZ(200px)
}
ul li:nth-child(6){
transform: rotateY(360deg) translateZ(200px)
}</style>
</head>
<body>
<ul>
<li><img src="images/staff_xw.png" alt=""></li>
<li><img src="images/staff_xw.png" alt=""></li>
<li><img src="images/staff_xw.png" alt=""></li>
<li><img src="images/staff_xw.png" alt=""></li>
<li><img src="images/staff_xw.png" alt=""></li>
<li><img src="images/staff_xw.png" alt=""></li>
</ul>
<script>
</script>
</body>
</html>
-------------------end------------------------------
现在给大家看看效果吧：
喜欢的盆友、遇到问题的盆友，请到公众号：【软件编程网站开发】找我解决。
扫一扫
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
