html5 3d展示特效代码

div class="box">
    div class="front">
    h2>
    前面/h2>
    /div>
    div class="back">
    h2>
    后面/h2>
    /div>
    div class="left">
    h2>
    左边/h2>
    /div>
    div class="right">
    h2>
    右边/h2>
    /div>
    div class="top">
    h2>
    上面/h2>
    /div>
    div class="bottom">
    h2>
    下面/h2>
    /div>
    /div>
.box {
    transform-style: preserve-3d;
    transition: 1s;
}
.box:hover {
    transform: rotateY(180deg);
}
.front, .back, .left, .right, .top, .bottom {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: #ccc;
    border: 1px solid #333;
}
.front {
    transform: translateZ(100px);
}
.back {
    transform: translateZ(-100px);
}
.left {
    transform: rotateY(-90deg) translateZ(100px) translateX(-100px);
}
.right {
    transform: rotateY(90deg) translateZ(100px) translateX(100px);
}
.top {
    transform: rotateX(90deg) translateZ(100px) translateY(-100px);
}
.bottom {
    transform: rotateX(-90deg) translateZ(100px) translateY(100px);
}
    

div class="box">
    div class="front">
    h2>
    前面/h2>
    /div>
    div class="back">
    h2>
    后面/h2>
    /div>
    /div>
.box {
    perspective: 1000px;
    transform-style: preserve-3d;
}
.front, .back {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: #ccc;
    border: 1px solid #333;
    transform-origin: center center;
    transition: 1s;
}
.back {
    transform: rotateY(180deg);
}
.box:hover .front {
    transform: rotateY(-180deg);
}
.box:hover .back {
    transform: rotateY(0deg);
}
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！