css3d立体代码 |css同时透明图片大小

/* 3D 立方体旋转代码 */
.container{ 
-webkit-perspective: 1000px;     /* 设置透视点位置 */
perspective: 1000px;
}
.cube{
position: relative;
width: 200px;
height: 200px;
margin: 0 auto;
transform-style: preserve-3d;    /* 设置元素变换的方式为 3D */
animation: rotate 10s infinite linear;    /* 设置旋转动画 */
}
@keyframes rotate{    /* 随时间改变的立方体旋转效果 */
0%{
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);    /* 初始状态 */
}
to{
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);  /* 末状态 */
}
}
/* 立方体的各个面 */
.front,.back,.left,.right,.top,.bottom{
position: absolute;
width: 200px;
height: 200px;
opacity: 0.9;
}
.front{
background-color: #1abc9c;
transform: translateZ(100px);
}
.back{
background-color: #f1c40f;
transform: rotateY(180deg) translateZ(100px);
}
.left{
background-color: #8e44ad;
transform: rotateY(-90deg) translateZ(100px);
}
.right{
background-color: #2980b9;
transform: rotateY(90deg) translateZ(100px);
}
.top{
background-color: #e74c3c;
transform: rotateX(90deg) translateZ(100px);
}
.bottom{
background-color: #2c3e50;
transform: rotateX(-90deg) translateZ(100px);
}

上述代码是一个简单的立方体旋转特效，可以根据需要在立方体的每一个面上定义不同的内容和样式，让页面更加生动和有趣。

当然，这仅仅是立方体的一个简单示例。在 Css3 3D 立体效果中，还有更多更复杂的效果，具体实现方法也各不相同，完全可以根据需求调整样式和代码实现。