欢迎访问我的博客,博客正在建设中,如果你有好的建议欢迎来信!!-小酌
当前位置: 首页 > 前端 > css

css实现虚拟3D动画

小酌子 2018-09-03 39 0
之前编辑了老半天,悲剧的是没意识到网络已经断开,点完提交文章直接丢失(哭晕在屏幕前)!!
由于之前博客头部用的轮播图是网上扒过来的,原作者是通过jquery制作,需要的文件和大小略显臃肿。因为目前还没掌握jquery,调整起来有点困难,于是决定自己做一个轮播图,方便后期维护和调整.

下面这图便是新敲的一个3D轮播图,暂时长这样,后期还会不断的修改。



关于代码
1、HTML部份
     分为三层盒子,背景层、3D图片层、控制层。
     图片层有两层盒子,用了的ul和ol。一小一大。
2、CSS部份
      图层使用的是CSS3的transform-style:preserve-3d; 和 perspective:1100;(吐槽一下IE浏览器,各种不兼容)
然后用三个变形属性 rotateX rotateY rotateZ 和一个偏移属性 translateZ 配合实现立方体展示。通过hover控制鼠标进入时值的变化,实现图片透明度变化和分散。
接着用@keyframes属性把立方体动起来。
3、JS部份
JS部份主要是用来实现手动控制立方体不同角度旋转。
代码都很基础(基础都还没学好)
就这样吧,先记录下来。


查看演示

 

版权声明:除作者特别注明外,本站所有文章均为作者个人原创

转载请注明:出处 Récit | 怡然自酌 css实现虚拟3D动画

回到顶部