CSS3嵌套立方体旋转

来源：互联网发布：dnf决战人工智能d 编辑：程序博客网时间：2024/05/20 01:46
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        html{            background: linear-gradient( yellow 0%,#000 80%);            height: 100%;        }        .warp{            margin-top: 160px;            position:relative;            perspective: 1000px;            -webkit-perspective: 1000px;        }        .box{            width: 200px;            height: 200px;            position: relative;            margin:  0 auto;            -webkit-transform-style:preserve-3d;            -moz-transform-style:preserve-3d;            -o-transform-style:preserve-3d;            transform-style:preserve-3d;            transform:rotateY(-70deg) rotateX(-123deg);            animation: rotateBox 2s infinite linear;        }        .box div{            position: absolute;            width: 100%;            height: 100%;            border: 1px solid #fff;            background-color: #0082d8;            opacity: .8;            font-size: 26px;            line-height: 200px;            text-align: center;        }        .box span{            display: block;            position: absolute;            width: 100px;            height: 100px;            top: 50%;            left: 50%;            margin: -50px 0 0 -50px;            background-color: #000;            opacity: 0.8;            border: 1px solid #d3eef8;        }        /***外部盒子样式***/        .out-font{            transform: translateZ(100px);        }        .out-back{            transform: translateZ(-100px);        }        .out-left{            transform: translateY(-100px) rotateX(90deg);        }        .out-right{            transform: translateY(100px) rotateX(-90deg);        }        .out-top{            transform:rotateY(-90deg) translateZ(-100px);        }        .out-bottom{            transform: rotateY(90deg) translateZ(-100px);        }        /***内部盒子样式***/        .in-font{            transform: translateZ(-50px);        }        .in-back{            transform: translateZ(50px);        }        .in-left{            transform: translateY(50px) rotateX(90deg);        }        .in-right{            transform: translateY(-50px) rotateX(-90deg);        }        .in-top{            transform:rotateY(-90deg) translateZ(50px);        }        .in-bottom{            transform:rotateY(90deg) translateZ(-50px);        }        /***旋转动画***/        @keyframes rotateBox {            0%{                transform: rotateX(0deg) rotateY(0deg);            }            25%{                transform: rotateX(90deg) rotateY(90deg);            }            50%{                transform: rotateX(180deg) rotateY(180deg);            }            75%{                transform: rotateX(270deg) rotateY(270deg);            }            100%{                transform: rotateX(360deg) rotateY(360deg);            }        }        .warp:hover .out-font{            transform: translateZ(200px);        }        .warp:hover .out-back{            transform: translateZ(-200px);        }        .warp:hover .out-left{            transform: translateY(-200px) rotateX(90deg);        }        .warp:hover .out-right{            transform: translateY(200px) rotateX(-90deg);        }        .warp:hover .out-top{            transform:rotateY(-90deg) translateZ(-200px);        }        .warp:hover .out-bottom{            transform: rotateY(90deg) translateZ(-200px);        }    </style></head><body>    <div class="warp">        <div class="box">            <div class="out-font">前面</div>            <div class="out-back">后面</div>            <div class="out-left">左面</div>            <div class="out-right">右面</div>            <div class="out-top">上面</div>            <div class="out-bottom">下面</div>            <span class="in-font"></span>            <span class="in-back"></span>            <span class="in-left"></span>            <span class="in-right"></span>            <span class="in-top"></span>            <span class="in-bottom"></span>        </div>    </div></body></html>
“`
0 0