CSS3D魔法——旋转魔方

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、制作原理

=====================================================================

1、2D的动画属性

---

具体的动画属性参见博主的另一篇文章 ，2D动画属性点这里，你要的全拿走！！！

2、3D的动画属性

---

基本属性：

• 3D位移：translate3d(x,y,z)

• 3D旋转：rotate3d(x,y,z,deg)

• 透视：perspective

• 3D呈现：transfrom-style

三维坐标系：

三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。

X轴：水平向右（注意：X往右边是正值，往左边是负值）

Y轴：垂直向下（注意：Y往下面是正值，往上面是负值）

Z轴：垂直屏幕（注意：往外面是正值，往里面是负值）

我们看到的电脑屏幕的左上角等同于坐标中心原点，屏幕上边沿是x的正轴，屏幕左边沿是y的正轴。

二、魔方图片

=====================================================================

大家一起用自己喜欢的idol图片做一个酷炫的魔方吧！！！

先来看看静止状态下的效果图，别急，更好看的在下面！！！

效果图（示例）：

三、代码

===================================================================

css代码如下（示例）：

body {

/* 透视写在被观察元素的父盒子上面的 */

perspective: 3000px;

}

section {

position: relative;

width: 600px;

height: 600px;

margin: 500px auto;

/* 代码写给父级，子元素开启立体空间 */

transform-style: preserve-3d;

transition: all 2s;

animation: rotate 10s linear forwards;

}

/* 给每个div设置大小、背景图片和位置 */

section div:nth-child(1) {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: url(images/1.jpg);

transform: translateZ(300px);

}

section div:nth-child(2) {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: url(images/2.jpg);

transform: translateX(300px) rotateY(90deg);

}

section div:nth-child(3) {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: url(images/3.jpg);

transform: translateZ(-300px) rotateY(180deg);

}

section div:nth-child(4) {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: url(images/4.jpg);

transform: translateX(-300px) rotateY(270deg);

}

section div:nth-child(5) {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: url(images/5.jpg);

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

}

section div:nth-child(6) {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: url(images/6.jpg);

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

}

/* 制作旋转动画 */

@keyframes rotate {

0% {}

25% {

transform: rotateX(270deg);

}

50% {

transform: rotate3d(-1, -1, 0, 270deg);

}

75% {

transform: rotate3d(1, -1, 0, 180deg);

}

100% {

transform: rotateY(270deg);

}

}

/* 规定鼠标指向魔方的时候规定动画是否正在运行或暂停 默认是running，暂停是paused */

section:hover {

animation-play-state: paused;