立方体的实现 2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--这个是利用的是基点的去旋转效果得到
            把基点放在中间，去旋转就可以得到想要的，如何旋转就要看自己的想象辣
            
        -->
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #wrap{
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                width: 300px;
                height: 300px;
                border: 1px solid;
                
                perspective: 200px;
                /*transform-style: preserve-3d;*/
            }
            
            #wrap > .box{
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                width: 100px;
                height: 100px;
                transition:3s ;
                transform-style: preserve-3d;
                transform-origin: center center -50px; 
            }
            #wrap > .box > div{
                position: absolute;
                width: 100px;
                height: 100px;
                text-align: center;
                font: 50px/100px "微软雅黑";
                background: rgba(123,223,333,.3);
                transform-origin: center center -50px;
                backface-visibility: hidden;
            }
            #wrap > .box > div:nth-child(5){
                transform: rotateX(-90deg);
                
            }
            #wrap > .box > div:nth-child(6){
                transform: rotateX(90deg);
                
            }
            #wrap > .box > div:nth-child(3){
            transform: rotateY(-90deg);
                
            }
            #wrap > .box > div:nth-child(4){
                transform: rotateY(90deg);
            
            }
            #wrap > .box > div:nth-child(2){
                /*transform: translateZ(-100px) rotateZ(180deg);*/
                transform: rotateY(180DEG) rotateZ(180DEG);
                
            }
            #wrap > .box > div:nth-child(1){
            
            }
            
            #wrap:hover .box{
            transform: rotate3d(1,1,1,180deg);
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <div class="box">
                <div>前</div>
                <div>后</div>
                <div>左</div>
                <div>右</div>
                <div>上</div>
                <div>下</div>
            </div>
        </div>
    </body>
</html>
效果图：
posted @ 2018-09-12 17:37 你若精彩，蝴蝶自来阅读(224) 评论(0) 编辑收藏举报
你若精彩，蝴蝶自来

立方体的实现 2

公告
