html立方体源码,立方体.html · wanglu458512/css3 - Gitee.com

正方体

body {

perspective: 900px;

}

.box {

position: relative;

width: 200px;

height: 200px;

margin: 200px auto;

/* 让子元素保留3D空间 */

transform-style: preserve-3d;

/* 变换角度,方便观察 */

transform: rotateX(20deg) rotateY(30deg);

animation: move 4s linear infinite;

}

@keyframes move{

0% {

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

}

100% {

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

}

}

.box div {

position: absolute;

width: 100%;

height: 100%;

text-align: center;

line-height: 200px;

opacity: .5;

}

.box:hover {

animation-play-state: paused;

}

/* 为每个面添加效果 */

.front {

background-color: red;

transform: translateZ(100px);

}

.back {

background-color:orange;

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

}

.left {

background-color: yellow;

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

}

.right {

background-color: green;

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

}

.top {

background-color: skyblue;

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

}

.bottom {

background-color: slateblue;

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

}

前

后

左

右

上

下

一键复制

编辑

Web IDE

原始数据

按行查看

历史