CSS3高级效果之空间转换:位置、旋转、缩放

        白龙网认为,空间转换,也叫3D转换,通过X/Y/Z轴三个方向改变盒子的位移、旋转、绽放等形态,Z轴与视频的方向相同,正值指向自己。属性亦然是transform。
(1)位移
        位移有可以分3种(X/Y/Z)独立的写法,也可以以复合属性的形式去写。
A.存在已经知盒子,给盒子初值过度效果,然后在HOVER中添加水平、垂直、Z轴效果即可。
    <style>
        body {
            perspective: 1000px;
        }
        div {
            margin: 300px auto;
            width: 200px;
            height: 200px;
            background-color:red;
            transition: all 5s;
        }
        div:hover {
            /* transform: translate3d(100px,200px,300px); */
            /* transform: translateX(100px); */
            /* transform: translateY(200px); */
            transform: translateZ(300px);
            transform: translateZ(-300px);
        }
    </style>
</head>
<body>
    <div></div>
</body>
B.透视效果(近大远小)
 要想实现Z轴近大无小透视的效果,必须给元素的父标签添加一个perspective属性,属性值建议800-1200px之间。
  如果perspcetive的属性值透视距不在800-1200px之间,则透视效果可能会太大,或者变化不太大,与违生活常识,不合理。
(2)旋转
A.基本用法
旋转有两种写法,一是分别单独写X/Y/Z两个轴的旋转角度;二是复合复合属性值X,Y.Z写在一起,再加上角度即可,属性值的聚会满园是0~1之间。
有目标盒子,选中盒子分别给X/Y/Y轴旋转角度即可。不管哪个轴转,顺时针为正值,逆时针为负值。
    <style>
        body {
            perspective: 1000px;
        }
        img {
            width: 200px;
            height: 200px;
            transition: all 3s;
        }
        img:hover {
            transform: rotateX(60deg);
            transform: rotate(-60deg);
            transform: rotateY(360deg);
            transform: rotateY(-360deg);
            transform: rotateZ(360deg);
            transform: rotateZ(-360deg);
            transform: rotate3d(1,1,0.5,360deg);
 
        }
    </style>
</head>
<body>
    <img src="./rotate.jpg" alt="">
</body>
 
B.立体效果
transform-style: preserve-3d的作用上让子元素产生3D效果,因此该属性用在父元素当中;默认情况下flat是平面效果。
立体图形旋转的一般思路,布局好盒子之后,首先,要在父元素中打开3D开关(transform-style: preserve-3d;);然后给前面一个子元素一个沿着Z轴的位移(transform: translateZ(200px); 最后确保鼠标经过父元素时盒子有过度的旋转效果(transform: rotateY(360deg);),因此这个时候,需要再给父元素一个过度的属性。
a.案例1:背景图片切换
   <style>
        * {
            margin: 0;
            padding: 0;
        }
        .cube {
            transform-style: preserve-3d;
            margin: 0 auto;
            width: 200px;
            height: 200px;
            position: relative;
            transition: all 2s;
        }
        .cube div {
            width: 200px;
            height: 200px;
            
        }
        .front {
            position: absolute;
            left: 0;
            top: 0;
            background-color:orange;
             transform: translateZ(200px); 
           
        }
        .back {
            background-color:green;
        }
        .cube:hover {
            transform: rotateY(360deg);
        }
    </style>
</head>
<body>
    <div class="cube">
        <div class="front"></div>
        <div class="back"></div>
    </div>
</body>
b.案例2:立体导航菜单
立体导航的实现,宏观上说,布局盒子、构建立体图这两步即可实现。布局盒子,就是要弄清楚功能需要的几个标签与结构。构建立体图时,首先要把父元素上打开3D开关,设置过度效果,同时,添加一个沿X/Y轴轻微旋转的测试立体效果,让调试过程具有可见性;其次是对子元素旋转、位移的操作;最后给父元素一个鼠标经过的旋转效果即可模拟实现。
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul,li {
            list-style: none;
        }
        a {
            text-decoration: none;
        }
        .nav {
            margin: 0 auto;
            width: 300px;
            height: 40px;
        }
        .nav li {           
            float: left;
            width: 100px;
            height: 40px;
            transform-style: preserve-3d;
            transition: all 2s;
            /* 测试旋转,方便查看3D效果 */
            /* transform: rotateX(-20deg) rotateY(30deg); */
        }
        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 40px;
            color: #fff;
        }
        .nav li a:first-child {
            background-color:green;
            transform: translateZ(20px);
 
        }
        .nav li a:last-child {
            background-color:orange;
            transform: rotateX(90deg) translateZ(40px);
        }
        .nav li:hover {
            transform: rotateX(-90deg);
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li>
                <a href="">首页</a>
                <a href="">Home</a>
            </li>
            <li>
                <a href="">首页</a>
                <a href="">Home</a>
            </li>
            <li>
                <a href="" class="top">首页</a>
                <a href="" class="front">Home</a>
            </li>
        </ul>
    </div>
</body>
(3)缩放
绽放也有两种写法,一是单独写X/Y/Z轴的绽放比例,二是写一个复合属性,同时控制X,Y,Z三个方向的效果。
            transform: scale3d(0.9,1.5,3);
            transform: scaleX(2);
            transform: scaleY(3);
            transform: scaleZ(4);