3 D立体backface-visibility

21167 ワード

DOCTYPE html>
<html>
    <head>
        
        <meta charset="UTF-8">
        <title>title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
                
            }
            #wrap{
                position: absolute;
                left: 50%;
                top: 50%;
                width: 400px;
                height: 400px;
                margin-left: -200px;
                margin-top: -200px;
                border: 1px solid;
                perspective: 200px;
                background: url(3.jpg) no-repeat;
                background-size:100% 100%;
                
            }
            #wrap > .box{
                width: 100px;
                height: 100px;
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                
                transform-style: preserve-3d;
                transition: 3s;
                transform-origin: center center 50%; 
            }
            #wrap > .box > div{
                position: absolute;
                width: 100px;
                height: 100px;
                background: rgba(123,321,333,.3);
                text-align: center;
                font: 50px/100px " ";
                backface-visibility: hidden;
                
            }
            #wrap > .box >div:nth-child(5){
                 
                 top: -100px;
                 transform-origin: bottom;
                 transform: rotateX(90deg);
            }
            #wrap > .box >div:nth-child(6){
                 
                 bottom: -100px;
                 transform-origin: top;
                 transform: rotateX(-90deg);
            }
            #wrap > .box >div:nth-child(3){
                
                 left: -100px;
                 transform-origin: right;
                 transform: rotateY(-90deg);
            }
            #wrap > .box >div:nth-child(4){
                
                 right: -100px;
                 transform-origin: left;
                 transform: rotateY(90deg);
            }
            
            #wrap > .box >div:nth-child(2){
                 
                 transform:   translateZ(-100px) rotateX(180deg);
            }
            #wrap > .box >div:nth-child(1){
                 
                 z-index: 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>