立方体的实现 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>

效果图:

立方体的实现 2_第1张图片

 

转载于:https://www.cnblogs.com/caicaihong/p/9636221.html

你可能感兴趣的:(立方体的实现 2)