html 实现3d效果代码,纯CSS实现3D效果的立方体

HTML代码结构

当使用css属性perspective的时候，需要一个容器并设置perspective depth值，然后让它的子元素在这个容器中做运动

.container {

width: 200px;

height: 200px;

perspective: 1000px;

margin: 100px auto 0;

}

设置Perspective值

给perspective设置深度值，这个值表示屏幕到元素所在环境最远距离

.container {

width: 200px;

height: 200px;

perspective: 1000px;

margin: 100px auto 0;

}

给立方体设置3D属性

.cube {

transform-style: preserve-3d;

width: 100%;

height: 100%;

position: relative;

}

给立方体的每个面设置绝对定位，长宽100%，然后设置背景为网格状。

.face {

position: absolute;

width: 100%;

height: 100%;

background-image: repeating-linear-gradient(0deg, rgba(70,70,70, 0.2) 0px, rgba(70,70,70, 0.2) 1px,transparent 1px, transparent 21px),repeating-linear-gradient(90deg, rgba(70,70,70, 0.2) 0px, rgba(70,70,70, 0.2) 1px,transparent 1px, transparent 21px),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255));

}

对立方体的六个面进行Z轴的变换并且旋转，使它形成立方体的六个面

.top {

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

}

.bottom {

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

}

.right {

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

}

.left {

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

}

.front {

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

}

.back {

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

}

剩下最后一步就是让这个立方体旋转起来，设置无线循环的animation动画

@keyframes spin {

from {

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

}

to {

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

}

}

.cube {

transform-style: preserve-3d;

width: 100%;

height: 100%;

position: relative;

animation: spin 5s infinite linear;

}

实现效果如下