基于CSS3实现立方体自转效果
发布时间:2016-03-01 15:01:47 作者:佚名 我要评论
这篇文章主要介绍了基于CSS3实现立方体自转效果 的相关资料,需要的朋友可以参考下
先是HTML 一个父div包含四个绝对定位的div
首先,一个静态的立方体
让立方体转起来
这里定义了一个动画 rot
从起始位置转动到 Y轴-330deg X轴370deg
并且循环无限次,每次4s
基于CSS3实现立方体自转效果 的全部内容就给大家介绍完了,希望对大家有所帮助!
CSS Code复制内容到剪贴板
- <div class='container container--realistic'>
- <div class='cube cube--ani'>
- <div class='face'>1</div>
- <div class='face'>2</div>
- <div class='face'>3</div>
- <div class='face'>4</div>
- </div>
- </div>
CSS Code复制内容到剪贴板
- .face:nth-child() {
- -webkit-transform: /*rotateY(deg)*/ translateZ(.em /* half the side length, em in this case */);
- }
- .face:nth-child() {
- -webkit-transform: rotateY( deg) translateZ(.em);
- }
- .face:nth-child() {
- -webkit-transform: rotateY(deg) translateZ(.em);
- }
- .face:nth-child() {
- -webkit-transform: rotateY(deg) translateZ(.em);
- }
CSS Code复制内容到剪贴板
- .cube--ani {
- -webkit-animation: rot s linear infinite;
- }
- @-webkit-keyframes rot {
- to { -webkit-transform: rotateY(-deg) rotateX(deg); }
- }
从起始位置转动到 Y轴-330deg X轴370deg
并且循环无限次,每次4s
基于CSS3实现立方体自转效果 的全部内容就给大家介绍完了,希望对大家有所帮助!
相关文章
- CSS3实现3D立方体旋转动画特效是一款纯CSS3制作的3d旋转动画效果2015-01-09
- 这是一款非常大气华丽的HTML5/CSS3 3D实现的全屏3D焦点图特效插件,在页面的两侧,有两个带有立体浮动效果的左右箭头进行图片的切换。其焦点图的图片切换方式是3D效果的,2014-07-10
- 这是一款视觉效果超炫的采用CSS3实现的3D立方体动画,与以往的立方体动画效果不同的是,这款CSS3立方体动画的几个表面的背景颜色都有渐变的动画效果,并且会伴随着立方体的2014-06-17
- 一款HTML5动画,立方体会在不同的角度进行扭曲、放大和缩小2014-06-06
css3 transform 3d 使用html5+css3创建动态旋转的3d立方体
今天向大家介绍如何使用css3创建3d的立方体,操作方法为:上下左右键,实现立方体的翻转旋转效果2013-01-06css3 transform 3d 使用css3创建动态3d立方体(html5实践)
在今天的课程中,我将向大家介绍如何使用css3创建3d的立方体,操作方法为:上下左右键,实现立方体的翻转旋转效果,特酷,本人看后,目瞪口呆,值得收藏于参考2013-01-06
最新评论