CSS3-旋转3D立方体

前言：现在经常会在网页上看到很多非常炫酷的3D效果，立体效果，可能有很多小伙伴觉得会很难，其实利用CSS3是非常容易的，现在我们就马上进入学习吧。

效果图：

步骤一：

在body里写好HTML结构；

1-6的div是正方形的每一面。

步骤二：

*清除浏览器默认样式；

给box盒子设置宽高；

步骤三：

给盒子在页面中用固定定位居中；

margin -200px  是为了拉回自身盒子的一半才能实现定位的盒子居中

步骤四：

使盒子保留3D位置（非常重要）

步骤五：

让盒子一开始X轴和Y轴就有一个-15的角度，如果不加上这句话，那么一开始的时候则是平面了

步骤六：

因为我们的3D立方体具备旋转功能，所以此属性是要设置旋转元素的基点（轴心），我们是从中心为基点去旋转的

步骤七：

最后一条属性是设置动画时长，8S代表8秒，整个旋转动画执行完。

步骤八：

.box div是选择立体正方形的每一面，都给它们定好宽高和透明度。至于字体大小这些可以因人而异。主要是宽、高、绝对定位，这三个属性是必须要加上的，剩下的属性，可以根据项目不同而增删。

步骤九：

分别选择第1-6个div，给它们分别写上各自的背景颜色和相应的位置；

transform: translateY(-200px) rotateX(90deg);

以上这条属性是定义该盒子在页面上的X轴位置和Y轴位移

步骤十：

最后，鼠标移动box盒子的时候，旋转345度；

这里可能有疑问，为什么不是360度呢？因为360度刚好是一圈，如果设置成360度。那么8秒后，也就是执行完动画之后会变成一个平面了，就没有了3D的立体感了

【深圳校区】纯CSS3制作3D立方体.zip (367.12 KB, 下载次数: 55)

2017-4-21 13:45 上传

点击文件名下载附件

CSS3-旋转3D立方体

前言：现在经常会在网页上看到很多非常炫酷的3D效果，立体效果，可能有很多小伙伴觉得会很难，其实利用CSS3是非常容易的，现在我们就马上进入学习吧。

效果图：

步骤一：

在body里写好HTML结构；

1-6的div是正方形的每一面。

步骤二：

*清除浏览器默认样式；

给box盒子设置宽高；

步骤三：

给盒子在页面中用固定定位居中；

margin -200px  是为了拉回自身盒子的一半才能实现定位的盒子居中

步骤四：

使盒子保留3D位置（非常重要）

步骤五：

让盒子一开始X轴和Y轴就有一个-15的角度，如果不加上这句话，那么一开始的时候则是平面了

步骤六：

因为我们的3D立方体具备旋转功能，所以此属性是要设置旋转元素的基点（轴心），我们是从中心为基点去旋转的

步骤七：

最后一条属性是设置动画时长，8S代表8秒，整个旋转动画执行完。

步骤八：

.box div是选择立体正方形的每一面，都给它们定好宽高和透明度。至于字体大小这些可以因人而异。主要是宽、高、绝对定位，这三个属性是必须要加上的，剩下的属性，可以根据项目不同而增删。

步骤九：

分别选择第1-6个div，给它们分别写上各自的背景颜色和相应的位置；

transform: translateY(-200px) rotateX(90deg);

以上这条属性是定义该盒子在页面上的X轴位置和Y轴位移

步骤十：

最后，鼠标移动box盒子的时候，旋转345度；

这里可能有疑问，为什么不是360度呢？因为360度刚好是一圈，如果设置成360度。那么8秒后，也就是执行完动画之后会变成一个平面了，就没有了3D的立体感了

【深圳校区】纯CSS3制作3D立方体.zip (367.12 KB, 下载次数: 55)

2017-4-21 13:45 上传

点击文件名下载附件