CSS3实现3d图片旋转动画效果

1.实现原理

1.首先所有的图片的容器position:absolute，叠加在一起，然后一次设置rotateY分别为（36*i）deg ，i取0到10 ；所有图片会相交成一个类似花的形状然后为每个图片的容器设置translateZ，所有图片会从对应的角度向外移动，扩展成一个大圆，即下图效果
2.创建动画，让rotateY每次增加90deg旋转起来即可。同时，为了观察效果，让rotateX依次上下移动10deg。

2.HTML文件

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>3D旋转</title><link rel="stylesheet" type="text/css" href="style.css"></head>
<body>
<div id="photo_box"><img src="data:image/1.jpg"><img src="data:image/2.jpg"><img src="data:image/3.jpg"><img src="data:image/4.jpg"><img src="data:image/5.jpg"><img src="data:image/6.jpg"><img src="data:image/7.jpg"><img src="data:image/8.jpg"><img src="data:image/9.jpg"><img src="data:image/10.jpg"><img src="data:image/11.jpg">
</div>
</body>
</html>

3.CSS3文件

*{padding: 0;margin: 0;
}/*背景设置为黑色*/
body{background:#000;
}/*设置相册盒子大小、位置、外边框、旋转参数*/
#photo_box{width: 280px;height: 400px;position: fixed;left: 0;right: 0;top:0;bottom: 0;margin: 200px auto;transform-style: preserve-3d;/*表示所有子元素在3D空间中呈现*/transform: rotateX(-5deg) rotateY(0deg);animation: run 30s linear infinite;/*循环执行run动画，每30秒执行一次*/
}/*设置图像大小、边框、圆角、位置*/
#photo_box img{width: 250px;height: 350px;border: 5px solid #ccc;border-radius: 5px;position: absolute;left: 0;top: 0;
}/*依次设置图像盒子中每个图像旋转后位置*/
#photo_box img:nth-child(1){transform: rotateY(0deg) translateZ(500px);
}
#photo_box img:nth-child(2){transform: rotateY(36deg) translateZ(500px);
}
#photo_box img:nth-child(3){transform: rotateY(72deg) translateZ(500px);
}
#photo_box img:nth-child(4){transform: rotateY(108deg) translateZ(500px);
}
#photo_box img:nth-child(5){transform: rotateY(144deg) translateZ(500px);
}
#photo_box img:nth-child(6){transform: rotateY(180deg) translateZ(500px);
}
#photo_box img:nth-child(7){transform: rotateY(216deg) translateZ(500px);
}
#photo_box img:nth-child(8){transform: rotateY(252deg) translateZ(500px);
}
#photo_box img:nth-child(9){transform: rotateY(288deg) translateZ(500px);
}
#photo_box img:nth-child(10){transform: rotateY(324deg) translateZ(500px);
}
#photo_box img:nth-child(11){transform: rotateY(360deg) translateZ(500px);
}/*采用@keyframes 规则创建run动画。*/
@keyframes run {0%{transform: rotateX(0deg) rotateY(0deg);}25%{transform: rotateX(10deg) rotateY(90deg);}50%{transform: rotateX(0deg) rotateY(180deg);}75%{transform: rotateX(-10deg) rotateY(270deg);}100%{transform: rotateX(0deg) rotateY(360deg);}
}

4.效果展示

5.参考

1).用HTML+CSS代码制作3D旋转相册
2).HTML5+css3：3D旋转木马效果相册

欢迎关注我的公众号。

CSS3实现3d图片旋转动画效果相关推荐

css3动画图片旋转绕轴,css3图片旋转如何实现？css3实现图片旋转动画效果的方法...
在网页中,我们经常可以看到一张图片在旋转,这样的图片旋转是怎么来实现的呢?本篇文章就来为你介绍一下关于css3实现图片旋转动画效果的方法. 实现css3中图片的旋转可以使用可以使用 -webkit-a ...
css3滚动倾斜,CSS3实现倾斜和旋转动画效果
这次给大家带来CSS3实现倾斜和旋转动画效果,实现CSS3倾斜和旋转动画效果的注意事项有哪些,下面就是实战案例,一起来看一下. 先看看静态的效果,运行后的效果更好示例代码如下 css3学习 .d{w ...
旋转立体相册制作html,用CSS3制作3D动态旋转相册
最近做一个网站,想弄一个炫酷的效果,所以想到了用CSS3做一个图片3D旋转的效果.[实际就是做一个3D动态旋转相册,自己发挥哦] 下面直接上代码了. -------------------start- ...
HTML5——3D立方体旋转动画
效果图: 代码如下: <!DOCTYPE html> <html> <head><meta charset="UTF-8">< ...
html 结合3d效果,HTML和CSS3中的2D、3D结合实现动画效果
这篇文章给大家介绍的内容是关于HTML和CSS3中的2D.3D结合实现动画效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 虽然我们我们在前端工作中,对于2D.3D动画效果一般来说 ...
c语言实现图片过渡效果飞入,用css3实现转换过渡和动画效果
为什么要用css动画替换js动画导致JavaScript效率低的两大原因:操作DOM和使用页面动画. 通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果,导致js效率低的两个因素都包括在 ...
Css3旋转动画效果
Css3旋转动画效果通过@keyframes规则能够创建动画,CSS3是可以通过代码来创建动画的.用@keyframes定义规则后,就不用像之前先在元素定义执行几秒,@keyframes规则内指定一 ...
网页特效：用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
html仿微信拆红包效果旋转,利用React加CSS3实现微信拆红包动画效果实例（代码）...
本篇文章主要介绍了利用React加CSS3实现微信拆红包动画效果实例(代码),具有一定的参考价值,感兴趣的小伙伴们可以参考一下. 微信红包曾经引爆过一系列的营销热潮,相信大家对于这种红包形式并不陌生, ...
html图片 3d切换特效,一款基于css3的3D图片翻页切换特效
今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 实现的代码. html代码: Bedouin Blue-green Dram ...

CSS3实现3d图片旋转动画效果

1.实现原理

2.HTML文件

3.CSS3文件

4.效果展示

5.参考

CSS3实现3d图片旋转动画效果相关推荐

最新文章

热门文章