CSS3三维变形-立体方块

作者: 圆梦人生 | 来源:发表于2016-12-13 11:18 被阅读133次

CSS3三维变形-立体方块
跟老王学画画（8）
CSS3之变形
CSS3 Transform——transform-origin
css3之Transform
TRANSFORM
HTML 5_CSS 3_JavaScript讲义（十一）- 变
CSS3的transform
transform
使用css3写一个立体方块

3D变形与2D变形的最大不同就在于其参考的坐标轴不同，2D变形的坐标轴是平面的，只存在X轴和Y轴，而3D变形的坐标轴则是X、Y、Z三条轴组成的立体空间，X轴正向是朝右，Y周正向是朝下，Z轴正向是朝屏幕外。

案例：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <title>CSS3三维变形</title>
        <!--  -->
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            .box {
                position:relative;
                top: 100px;
                width:300px;
                height: 300px;
                margin: 0 auto;
                background-color: #ccc;
                /*
                    透视效果
                    越大透视距离越平面，反之亦然
                */
                perspective:800px;
            }
            .content {
                /*3d视图*/
                transform-style: preserve-3d;
                /*过度动画*/
                transition: all 3s linear;
                width:200px;
                height: 200px;
                position: absolute;
                top: 50px;
                left: 50px;
            }
            /*
                经过顺时针旋转
            */
            .content:hover {
                transform: rotateX(180deg) rotateY(180deg);
            }
            /*
                方块公共样式
            */
            .side {
                position: absolute;
                height: 200px;
                width: 200px;
                border: 2px solid #000;
                background: rgba(0,0,0,0.3);
                color: #fff;
                line-height: 200px;
                font-size: 30px;
                font-weight: bold;
                text-align: center;
                text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
            }
            /*
                前
            */
            .side1 {
                 transform: translateZ(100px);
            }
            /*
                后
            */
            .side2 {
                transform: rotateX(180deg) translateZ(100px);
            } 
            /*
                左
            */
            .side3 {
                transform: rotateY(-90deg) translateZ(100px);
            }
            /*
                右
            */
            .side4 {
                transform: rotateY(90deg) translateZ(100px);
            }
            /*
                上
            */
            .side5 {
                transform: rotateX(90deg) translateZ(100px);
            }
            /*
                下
            */
            .side6 {
                transform: rotateX(-90deg) translateZ(100px);
            }
        </style>
    </head>
    <body>
        <!-- begin -->
        <div class="box">
            <div class="content">
                <div class="side side1">1</div>
                <div class="side side2">2</div>
                <div class="side side3">3</div>
                <div class="side side4">4</div>
                <div class="side side5">5</div>
                <div class="side side6">6</div>
            </div>
        </div>
        <!-- end -->
    </body>
</html>

效果：