6面立体图片css |css 图标 content

 
 
 
 
 
 
.cube {
 width: 200px;
 height: 200px;
 position: relative;
 transform-style: preserve-3d;
 transform: rotateY(45deg);
}
.face {
 position: absolute;
 width: 200px;
 height: 200px;
 opacity: 0.95;
 background-size: cover;
}
.front {
 transform: translateZ(100px);
 background-image: url("front.jpg");
}
.back {
 transform: rotateY(180deg) translateZ(100px);
 background-image: url("back.jpg");
}
.left {
 transform: rotateY(-90deg) translateZ(100px);
 background-image: url("left.jpg");
}
.right {
 transform: rotateY(90deg) translateZ(100px);
 background-image: url("right.jpg");
}
.top {
 transform: rotateX(90deg) translateZ(100px);
 background-image: url("top.jpg");
}
.bottom {
 transform: rotateX(-90deg) translateZ(100px);
 background-image: url("bottom.jpg");
}

以上是实现六面立体图片效果的代码示例及效果预览。其中需要注意的是，使用六个div元素来分别代表六面，使用CSS3的transform属性来实现立体效果的呈现。