3d tranform css3 

#cube{
    margin: 100px auto;
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid black;
    perspective: 300;
    -webkit-perspective: 300;
    perspective-origin: 150% 150%;
    -webkit-perspective-origin: 50% 50%;
    transform-style: preserve-3d;
}

#cube>div{
    position: absolute;
    width: 100px;
    height: 100px;
    opacity: 0.4;
    text-align: center;
    line-height: 100px;
    font-size: 30px;
    transition: 1s;
}

#cube>#front{
    background: red;
    transform: rotateX(0) translateZ(50px);
}
#cube>#back{
    background: green;
    transform: rotateX(180deg) translateZ(50px);
}
#cube>#left{
    background: gray;
    transform: rotateY(90deg) translateZ(50px);
}
#cube>#right{
    background: yellow;
    transform: rotateY(-90deg) translateZ(50px);
}
#cube>#top{
    background: rgb(115, 182, 221);
    transform: rotateX(-90deg) translateZ(50px);
}
#cube>#bottom{
    background: rgb(52, 49, 214);
    transform: rotateX(90deg) translateZ(50px);
}

#cube{
    /* transform: rotateX(40deg) translateZ(-40px); */
    animation: mydhua 5s ease infinite;
}

@keyframes mydhua{

    0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);transform-origin: center center;}
    100%{transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg); transform-origin: center center;}
}

/* #cube:hover>#front{
    line-height: 200px;
    width:200px;
    height: 200px;
    background: red;
    transform: rotateX(0) translateZ(100px);
}
#cube:hover>#back{
    line-height: 200px;
    width:200px;
    height: 200px;
    background: green;
    transform: rotateX(180deg) translateZ(100px);
}
#cube:hover>#left{
    line-height: 200px;
    width:200px;
    height: 200px;
    background: gray;
    transform: rotateY(90deg) translateZ(100px);
}
#cube:hover>#right{
    line-height: 200px;
    width:200px;
    height: 200px;
    background: yellow;
    transform: rotateY(-90deg) translateZ(100px);
}
#cube:hover>#top{
    line-height: 200px;
    width:200px;
    height: 200px;
    background: rgb(115, 182, 221);
    transform: rotateX(-90deg) translateZ(100px);
}
#cube:hover>#bottom{
    line-height: 200px;
    width:200px;
    height: 200px;
    background: rgb(52, 49, 214);
    transform: rotateX(90deg) translateZ(100px);
} */

 

 

transform-style: preserve-3d;　　　　使得子元素当做3d元素来对待
perspective: 300;
-webkit-perspective: 300;
perspective-origin: 150% 150%;
-webkit-perspective-origin: 50% 50%;
 
引用代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        *{margin: 0;padding: 0;}
html,body{height: 100%;}
.wrap{
      height: 100%;position: relative;

      transform-style:preserve-3d;
      animation:mydhua 5s ease infinite;
}
.box{width: 200px;height: 200px;position: absolute;top: 50%;left: 50%;
     margin:-100px 0 0 -100px; line-height: 200px;text-align: center;font-size: 48px;color: white;
        }
.box1{
    transform:rotatey(90deg) translatez(-100px);
    background: rgba(128,0,128,.5);
}
.box2{
    transform:rotatey(90deg) translatez(100px);
    background: rgba(255,0,255,.5);
}
.box3{
    transform:rotatex(90deg) translatez(100px);
    background: rgba(255,153,204,.5);
}
.box4{
    transform:rotatex(90deg) translatez(-100px);
    background: rgba(0,204,255,.5);
}
.box5{
    transform: translatez(-100px);
    background: rgba(153,204,255,.5);
}
.box6{
    transform: translatez(100px);
    background: rgba(0,255,255,.5);
}

@keyframes mydhua{

    0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);transform-origin: center center;}
    100%{transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg);transform-origin: center center; }
}

    </style>
</head>
<body>
    <div class="wrap">
        <div class="box1 box">
            1</div>
        <div class="box2 box">
            2</div>
        <div class="box3 box">
            3</div>
        <div class="box4 box">
            4</div>
        <div class="box5 box">
            5</div>
        <div class="box6 box">
            6</div>
    </div>
</body>
</html>

 

posted @ 2018-11-29 20:54  托马斯blue_cat  阅读(121)  评论(0)  编辑  收藏  举报