css3立方体盒子

时间：2015-06-12 00:42:58 阅读：451 评论：0 收藏：0 [点我收藏+]

标签：

1.设置基准点，景深。

-webkit-perspective-origin:center -150px;
-webkit-perspective:300px;

2.建立3D空间。

-webkit-transform-style:preserve-3d;

3.布局。

<div id="wrap">
    <div class="main">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>     
</div>

#wrap .main div{
        width:100px;
        height:100px;    
        text-align: center;
        line-height: 100px;
        position:absolute;
        font-size: 50px;
        color:white;
        opacity:.8;
        -webkit-transition:2s;
    }
    #wrap .main div:nth-of-type(1){
        top:0;
        left:0;
        background:red;
    }
    #wrap .main div:nth-of-type(2){
        top:-100px;
        left:0;
        background:orange;
        -webkit-transform-origin:bottom;
        -webkit-transform:rotateX(-90deg);
    }
    #wrap .bd div:nth-of-type(3){
        top:0px;
        left:-100px;
        background:yellow;
        -webkit-transform-origin:right;
        -webkit-transform:rotateY(90deg);
    }
    #wrap .main div:nth-of-type(4){
        top:0px;
        left:100px;
        background:green;
        -webkit-transform-origin:left;
        -webkit-transform:rotateY(-90deg);
    }
    #wrap .main div:nth-of-type(5){
        top:100px;
        left:0px;
        background:blue;
        -webkit-transform-origin:top;
        -webkit-transform:rotateX(90deg);
    }
    #wrap .main div:nth-of-type(6){
        top:0;
        left:0;
        background:purple;
        -webkit-transform:translateZ(100px);
    }

4.完整代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>立方体</title>
        <meta name="description" content="">
        <meta name="keywords" content="">
        <link href="" rel="stylesheet">

    </head>

    <body>
        <style>
            @-webkit-keyframes move { //关键帧
            
                0% {
                    -webkit-transform:rotateY(0deg);
                }
                25% {
                    -webkit-transform:rotateY(90deg);
                }
                50% {
                    -webkit-transform:rotateY(180deg);
                }
                75% {
                    -webkit-transform:rotateY(270deg);
                }
                100% {
                    -webkit-transform:rotateY(360deg);
                }
            }
            body{
                -webkit-transform-style:preserve-3d;
            }
            #wrap{
                width:100px;
                height:100px;
                margin:10px auto;
                padding:50px;
                border:1px solid red;
                -webkit-perspective:300px;                 //景深
                -webkit-perspective-origin:center -150px;  //基准点
            }
            #wrap .main{
                position:relative;
                transition:2s; 
                -webkit-transform-style:preserve-3d;
                -webkit-animation: move 5s infinite linear; //动画
            }
        
            #wrap .main div{
                width:100px;
                height:100px;    
                text-align: center;
                line-height: 100px;
                position:absolute;
                font-size: 50px;
                color:white;
                opacity:.8;
                -webkit-transition:2s;
            }
            #wrap .main div:nth-of-type(1){
                top:0;
                left:0;
                background:red;
            }
            #wrap .main div:nth-of-type(2){
                top:-100px;
                left:0;
                background:orange;
                -webkit-transform-origin:bottom;
                -webkit-transform:rotateX(-90deg);
            }
            #wrap .main div:nth-of-type(3){
                top:0px;
                left:-100px;
                background:yellow;
                -webkit-transform-origin:right;
                -webkit-transform:rotateY(90deg);
            }
            #wrap .main div:nth-of-type(4){
                top:0px;
                left:100px;
                background:green;
                -webkit-transform-origin:left;
                -webkit-transform:rotateY(-90deg);
            }
            #wrap .main div:nth-of-type(5){
                top:100px;
                left:0px;
                background:blue;
                -webkit-transform-origin:top;
                -webkit-transform:rotateX(90deg);
            }
            #wrap .main div:nth-of-type(6){
                top:0;
                left:0;
                background:purple;
                -webkit-transform:translateZ(100px);
            }
        </style>
        <div id="wrap">
            <div class="main">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
            </div>
        </div>

    </body>

</html>

css3立方体盒子

标签：

原文地址：http://www.cnblogs.com/liujin0505/p/4570389.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行