纯CSS3做3D动画魔方

之前本来就做过一次，忘了记录了。最近在做抽奖程序的时候看到那个界面就又想再做一次，于是作为小白的掌柜就再次做了一个很简单的3D动画魔方。主要用到的知识点是

相对定位(position: relative)与绝对定位(position: absolute)
浮动(float: left)
transform-style： preserve-3d
动画(animation)的设置
旋转(rotate())和位移（是Z轴的，translateZ)
ps：如果跟掌柜一样是用无序列表的ul+li 来做里面的小方块的，记得设置ul{ margin: 0; padding: 0;} 即清除内外边距，不然里面的九个小方块会不整齐排列。

这里着重讲一下当六个面层叠在一起的时候，如何旋转跟位移的问题。有点考验大家的空间想象力在这里，不过掌柜的听了老师的讲解后，觉得很容易就理解了，大家可以试着拿出六张纸巾（其他都行，老师说的是手掌，anyway只要你能理解）重叠在一起且面对着我们的脸。

然后我们现在能看到的就是第一个面，其余五个面都隐藏在他后面了。现在我们先移动右边这个面，要想让第二个面变成魔方的右面，需要先沿着Y轴旋转90度，此时旋转后的这个面是垂直于第一个面的。所以我们还需要让这个垂直的面沿着Z轴，位移魔方宽度的一半，才能刚好到达魔方的右面。也许你会问为什么不沿着X轴位移，这个你可以试试，就知道为什么不这样做了！所以右面的代码是这样的：

.c-right {background-color: transparent; /*颜色透明*/ transform: rotateY(90deg) translateZ(150px);
}

同理后面的左面、上面跟下面都是这样的设置。接着前面跟后面这两个面就不需要旋转，只需要一个正向沿着Z轴移动，一个负向移动就OK。到这里魔方就拼好了，但是还是2D的，所以需要我们来个动画效果就彻底完成，代码如下：

@keyframes cube {0% {transform: rotateX(0deg) rotateY(0deg);}   50%{transform: rotateX(120deg) rotateY(60deg);}100%{transform: rotateX(360deg) rotateY(360deg);}
}

上面的角度可以自己随意设置，看你想怎么旋转。到这里简单的3D动画魔方就做好了（如上图）），这真的是个很简单的练手项目，适合像掌柜这样的小白来巩固基础知识，大神们就可以忽略。接下来小白掌柜还有其他基础项目在做，改天再接着更博！谢谢各位的浏览，实在需要看完整代码的可以去“我的资源”页面下载，再次感谢。

纯CSS3做3D动画魔方相关推荐

纯CSS3实现3D动画导航，html5 webRTC技术实现免费网页电话拨打
花了一周的时间完成了说吧 (免费网页电话) 的前端开发工作,先将技术点总结如下: 免费电话采用最新的html5 webRTC 技术实现互联网和电信MIS网互通实现网页电话,目前只有 google ...
纯html5语言编写的动画,8个纯CSS3制作的动画应用及源码
本文作者html5tricks,转载请注明出处对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以 ...
纯CSS3文字Loading动画特效
纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载更多专业前端知识,请上 [猿2048]www.mk2048.com
css3-13 css3的3D动画如何实现
css3-13 css3的3D动画如何实现一.总结一句话总结:这里是transform+setInterval实现.transform属性里面的rotate属性值变成rotateX或rotateY ...
用纯CSS3实现闪闪发光的动画
用纯CSS3实现闪闪发光的动画,最终实现效果如下图所示以下展示实现该效果的代码: <!DOCTYPE HTML><html><head><title> ...
纯css3可爱仙人掌动画效果
下载地址纯css3可爱仙人掌动画效果,html+css代码,没有使用任何JavaScript代码实现的动画效果. dd:
纯CSS3冰川北极熊动画js特效
下载地址纯CSS3冰川北极熊动画特效是一款卡通可爱的北极熊站在冰面上漂浮动画场景特效. dd:
纯css3彩色3d雪糕
下载地址纯css3代码实现的彩色3d雪糕,带动画效果的css3冰淇淋代码. dd:
浅谈css3的3D动画效果并制作一个简单的旋转照片墙
各位读者大家好,我是一只小菜鸟.目前正在学习web前端方面的相关知识.,这也是小菜鸟第一次写博客.写的有哪里不对的地方欢迎各位指正. 本篇文章内容就是利用简单的HTML布局再加上CSS3的3D转换和动 ...

纯CSS3做3D动画魔方

纯CSS3做3D动画魔方相关推荐

最新文章

热门文章