也就是这样:,CSS3近阶段篇之酷炫的3D旋转透视

  也就是这样:,CSS3近阶段篇之酷炫的3D旋转透视
  这篇文章主要介绍了CSS3近阶段篇之酷炫的3D旋转透视 的相关资料,

先上 demo ,没有将精力放在兼容上,请用 chrome 打开,

4、最后利用 animation ,我们让舞台,也就是包裹着图片的容器绕 Y 轴旋转起来,那么一个类似旋转木马的 3D 照片墙效果就完成了!。
  这篇文章主要介绍了CSS3近阶段篇之酷炫的3D旋转透视 的相关资料,需要的朋友可以参考下
  

之前学习 react+webpack ,偶然路过 webpack 官 ,看到顶部的 LOGO ,就很感兴趣。
  
也就是这样:,CSS3近阶段篇之酷炫的3D旋转透视
  

最近觉得自己 CSS3 过于薄弱,想着深入学习一番,遂以这个 LOGO 为切入口,好好研究学习了一下相关的 CSS3 属性。webpack 的 LOGO 动画效果乍看不是很难,深入了解之后,觉得内部其实大有学问,自己折腾了一番,做了一系列相关的 CSS3 动画效果。
  

先上 demo ,没有将精力放在兼容上,请用 chrome 打开。
  

本文完整的代码,以及更多的 CSS3 效果,在我github上可以看到,也希望大家可以点个 star。
  

嗯,可能有些人打不开 demo 或者页面乱了,贴几张效果图:
  

可能上面的效果对精通 CSS3 的而言小菜一碟,写本文的目的也是我自己学习积累的一个过程,感兴趣的就可以一起往下看啦。
  

其实 CSS3 效果真的很强大,上面的效果都是纯 CSS 实现,个人感觉越是深入 CSS 的学习,越是觉得自己不懂 CSS ,不过话说回来,这些效果的实用炒个人喜好了,图片的 3D 旋转木马效果是类似钢管舞旋转的运动,因此是绕 Y 轴的,我们关心的是rotateY的大小,根据我们添加的图片数量,用 360° 的圆周角将每个图片等分,也就是让每张图片绕 Y 轴旋转固定角度依次散开:
  

3、这个时候,N 张图肯定是重合叠在了一起,所以这里关键一步是运用translateZ 让图片沿 Z 轴平移,也就是运用translateZ 可以让图片离我们更近或者更远,因为上一步设置了图片不同的rotateY 角度,所以 N 张图片设定一个translateZ 后,图片就很自然以中点为圆心分散开了,也就是这样:
  

4、最后利用 animation ,我们让舞台,也就是包裹着图片的容器绕 Y 轴旋转起来,那么一个类似旋转木马的 3D 照片墙效果就完成了!
  

这里要注意的一点是设置的persepective 值和单个图片translateZ 的值,persepective 一定要比translateZ 的值大,否则就是相当于舞台跑你身后去了,肯定是看不到效果了。
  需要的朋友可以参考下,

之前学习 react+webpack ,偶然路过 webpack 官 ,看到顶部的 LOGO ,就很感兴趣,

本文完整的代码,以及更多的 CSS3 效果,在我github上可以看到,也希望大家可以点个 star,

3、这个时候,N 张图肯定是重合叠在了一起,所以这里关键一步是运用translateZ 让图片沿 Z 轴平移,也就是运用translateZ 可以让图片离我们更近或者更远,因为上一步设置了图片不同的rotateY 角度,所以 N 张图片设定一个translateZ 后,图片就很自然以中点为圆心分散开了,也就是这样:。

发表评论

电子邮件地址不会被公开。 必填项已用*标注