520情人节到了，作为程序猿的我用代码给女朋友送了一个礼物「可以拿去送给自己喜欢的人」

}

2.2 先做上面的一个面

.outer-top {

background-color: rgb(236, 32, 17);

}

2.2 在立方体容器中创造3d效果

.cube {

/* 创造3D效果 */

transform-style: preserve-3d;

/* 显示立体效果 */

transform: rotateX(-30deg) rotateY(57deg);

}

2.3 旋转画好的面

原来的位置是正对着我们的，需要让正对我们的面跑到上面去，方法是：以X轴向上旋转90度，坐标系也跟着X轴发生了变化，此时Z轴是向上的，再向Z轴平移100px。

.outer-top {

background-color: rgb(236, 32, 17);

transform: rotateX(90deg) translateZ(100px);

}

2.4 完成其它几个面的制作

.outer-bottom {

background-color: rgb(0, 255, 13);

transform: rotateX(-90deg) translateZ(100px);

}

.outer-front {

background-color: blue;

transform: rotateY(0deg) translateZ(100px);

}

.outer-back {

background-color:rgb(231, 228, 28);

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

}

.outer-left {

background-color: rgb(0, 124, 128);

transform: rotateY(90deg) translateZ(100px);

}

.outer-right {

background-color: rgb(255, 0, 221);

transform: rotateY(-90deg) translateZ(100px);

}

2.5 绘制嵌套的内层立方体

.inner-cube>div {

width: 130px;

height: 130px;

position: absolute;

top: 35px;

left: 35px;

}

.inner-top {

background-color: deepskyblue;

transform: rotateX(90deg) translateZ(65px);

}

.inner-bottom {

background-color: deepskyblue;

transform: rotateX(-90deg) translateZ(65px);

}

.inner-front {

background-color: deepskyblue;

transform: rotateY(0deg) translateZ(65px);

}

.inner-back {

background-color: deepskyblue;

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

}

.inner-left {

background-color: deepskyblue;

transform: rotateY(90deg) translateZ(65px);

}

.inner-right {

background-color: deepskyblue;

transform: rotateY(-90deg) translateZ(65px);

}

2.6 使立方体旋转起来

.cube {

animation: rotate 15s infinite;

}

.cube .outer-cube, .cube .inner-cube {

transform-style: preserve-3d;

}

/* 旋转 */

@keyframes rotate {

from {

transform: rotateX(0deg) rotateY(0deg);

}

to {

transform: rotateX(360deg) rotateY(360deg);

}

}

2.7 添加鼠标移入后的效果

.cube:hover .outer-top {

right: -70px;

bottom: -70px;

width: 200px;

height: 200px;

opacity: 0.8;

transform: rotateX(90deg) translateZ(200px);

}

.cube:hover .outer-bottom {

right: -70px;

bottom: -70px;

width: 200px;

height: 200px;

opacity: 0.8;

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

}

.cube:hover .outer-front {

right: -70px;

bottom: -70px;

width: 200px;

height: 200px;

opacity: 0.8;

transform: rotateY(0deg) translateZ(200px);

}

.cube:hover .outer-back {

right: -70px;

bottom: -70px;

width: 200px;

height: 200px;

opacity: 0.8;

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

}

.cube:hover .outer-left {

right: -70px;

bottom: -70px;

width: 200px;

height: 200px;

opacity: 0.8;

transform: rotateY(90deg) translateZ(200px);

}

.cube:hover .outer-right {

right: -70px;

bottom: -70px;

width: 200px;

height: 200px;

opacity: 0.8;

transform: rotateY(-90deg) translateZ(200px);

}

四、完整代码

1. html代码

3D立方体旋转

Your browser does not support the audio element.

扬帆向海制作

温馨提示：鼠标移入移出立方体，将会显示效果！

2. css代码

• {

margin: 0px;

padding: 0px;

}

html {

overflow: hidden;

height: 100%;

background: linear-gradient(rgb(0, 238, 255) 0%, #000 100%);

}

.title {

color: rgb(255, 0, 200);

text-align: center;

text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;

font-size: 40px;

}

.cube {

position: relative;

margin: 0px auto;

margin-top: 9%;

margin-left: 42%;

width: 200px;

height: 200px;

transform: rotateX(-30deg) rotateY(-80deg);

transform-style: preserve-3d;

animation: rotate 15s infinite;

}

.cube .outer-cube,

.cube .inner-cube {

transform-style: preserve-3d;

}

/* 旋转立方体 */

@keyframes rotate {

from {

transform: rotateX(0deg) rotateY(0deg);

}

to {

transform: rotateX(360deg) rotateY(360deg);

}

}

/* 外层立方体样式 */

.outer-cube .outer-top,

.outer-cube .outer-bottom,

.outer-cube .outer-right,

.outer-cube .outer-left,

.outer-cube .outer-front,

.outer-cube .outer-back {

position: absolute;

top: 0;

left: 0;

width: 200px;

height: 200px;

border: 1px solid #fff;

opacity: 0.3;

transition: all .9s;

}

.outer-cube img {

width: 200px;

height: 200px;

}

.outer-top {

transform: rotateX(90deg) translateZ(100px);

}

.outer-bottom {

transform: rotateX(-90deg) translateZ(100px);

}

.outer-front {

transform: rotateY(0deg) translateZ(100px);

}

.outer-back {

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

}

.outer-left {

transform: rotateY(90deg) translateZ(100px);

}

.outer-right {

transform: rotateY(-90deg) translateZ(100px);

}

/* 嵌套的内层立方体样式 */

.inner-cube>div {

position: absolute;

top: 35px;

left: 35px;

width: 130px;