CSS 3D变换

1、3D transform中有下面这三个方法:
  • rotateX( angle )
  • rotateY( angle )
  • rotateZ( angle )

意思是分别绕着X/Y/Z轴进行旋转。
学过一部分数学知识的人应该都能理解这里XYZ轴的意思。
可参见下图:

《CSS 3D变换》 笛卡尔坐标系

2、perspective属性

perspective属性的存在与否决定了所看到的是2D的还是3D的。 没有透视,就不能称为3D。

《CSS 3D变换》 3D透视

CSS3 3D transform中的透视的透视点与上面示例图是不同的:CSS3 3D transform的透视点是在浏览器的前方,近似就是眼睛所在方位。

例如,一个1360像素宽的显示器中有张图片,应用了3D transform,同时,该元素或该元素父辈元素设置的perspective大小为2000像素。则这张图片呈现的3D效果就跟你本人在1.47个显示器宽度的地方(1360*1.47≈2000)看到的真实效果一致。

3、translateZ()

translateZ()就相当于让图片向它正在面对的方向走过来(正值)或者远去(负值)。

所以,对于没有rotateX()和rotateY()的元素,translateZ()就相当于让它向屏幕前的你走过来或离你远去。
用这种情况举例。
(1)如果,设置父元素的perspective为1000px,当你设置子元素的translateZ()的值大于或等于1000px时,元素将会从屏幕上消失!这不难理解,相当于元素走到了你眼睛的后面,而显然,眼睛看不到自己后面的东西。
(2)translateZ()的值越小,元素越小,符合我们认知中远大近小的场景。
当父元素没有设置overflow:hidden的时候,translateZ()的值十分接近perspective的值也就是1000px时,元素将充斥整个屏幕,相当于把元素拿到了你眼前。

4、perspective-origin

perspective-origin设置了你看元素的角度。默认是50% 50%;
第一个参数表示了从左向右的偏向程度,50%表示视线落在中间,不偏左也不偏右,30%则表示从左向右数30%的地方看。
第二个参数表示了从上到下的偏向程度,类同第一个参数。

《CSS 3D变换》 perspective-origin=50% 30%
《CSS 3D变换》 perspective-origin=50% 50%
《CSS 3D变换》 perspective-origin=20% 50%

5、transform-style: preserve-3d

transform-style有两个可能的值:flat(默认值,平面的)和preserved-3d
(3D透视)这个属性是定义你是用什么方式看到元素,一般想要呈现3D效果就要把这个设置为preserved-3d。

一般而言,该声明应用在3D变换的元素们的父元素上,也就是舞台元素。

6、backface-visibility

在CSS3 3D中,默认情况下我们可以看到背后的元素。但是为了贴合实际,我们常常设置为backface-visibility:hidden,使背后元素不可见。

7、一个小例子(借鉴于张鑫旭的博客)

效果:

《CSS 3D变换》 效果图

点击图片区域可以实现照片按顺时针旋转。
可以将例子复制到自己的网页中试一下!

代码:

<!DOCTYPE html>
<html>
<head>
    <title>transform 3D test</title>
    <meta charset="utf-8">
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
</head>
<body>
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
        }
        .main{
            width: 100%;
            height: 100%;
            background-color: #ccc;
            text-align: center;
            position: absolute;
        }
        .stage{
            width: 900px;
            min-height: 100px;
            margin-left: auto;
            margin-right: auto;
            padding: 100px 50px;
            background-color: #f0f0f0;
            box-shadow: inset 0 0 3px rgba(0,0,0,.35);
             -webkit-perspective: 800px;
               -moz-perspective: 800px;
                    perspective: 800px;
            -webkit-transition: top .5s;
            position: relative;
            top: 50%;
            perspective-origin: 50% 30%;
            transform: translate(0,-50%);
        }
        .pic{
            width: 128px;
            height: 80px;
            box-shadow: 0 1px 3px rgba(0,0,0,.5);
            -webkit-transition: opacity 1s, -webkit-transform 1s;
               -moz-transition: opacity 1s, -moz-transform 1s;
                    transition: opacity 1s, transform 1s;
            position: absolute;
            bottom: 0;
        }
        .pic:nth-child(1) { transform: rotateY(   0deg ) translateZ(200px);}
        .pic:nth-child(2) { transform: rotateY(  40deg ) translateZ(200px);}
        .pic:nth-child(3) { transform: rotateY(  80deg ) translateZ(200px);}
        .pic:nth-child(4) { transform: rotateY( 120deg ) translateZ(200px);}
        .pic:nth-child(5) { transform: rotateY( 160deg ) translateZ(200px);}
        .pic:nth-child(6) { transform: rotateY( 200deg ) translateZ(200px);}
        .pic:nth-child(7) { transform: rotateY( 240deg ) translateZ(200px);}
        .pic:nth-child(8) { transform: rotateY( 280deg ) translateZ(200px);}
        .pic:nth-child(9) { transform: rotateY( 320deg ) translateZ(200px);}
        .container{
            width: 128px;
            height: 100px;
            margin-left: -64px;
            -webkit-transition: -webkit-transform 1s;
               -moz-transition: -moz-transform 1s;
                    transition: transform 1s;
            -webkit-transform-style: preserve-3d;
              -moz-transform-style: preserve-3d;
                   transform-style: preserve-3d;
            position: absolute;
            left: 50%;
        }
        .orange{
            background-color: orange;
        }
        .red{
            background-color: red;
        }
        .green{
            background-color: green;
        }
        .white{
            background-color: white;
        }
        .black{
            background-color: black;
        }
        .blue{
            background-color: blue;
        }
    </style>
    <div class="main">
        <div class="stage">
            <div class="container">
                <div class="pic orange">1</div>
                <div class="pic red">2</div>
                <div class="pic green">3</div>
                <div class="pic white">4</div>
                <div class="pic black">5</div>
                <div class="pic blue">6</div>
                <div class="pic orange">7</div>
                <div class="pic white">8</div>
                <div class="pic green">9</div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var x=1;
        $(".container").on('click',function(){
            var y=40*x;
            var container=$(".container");
            container.css("transform","rotateY("+(-1*y)+"deg)");
            x++;
        });
    </script>

</body>
</html>

第一次接触CSS 3D,觉得蛮好玩的,记得之前看到过一个应用rotate做了一个很好看的旋转菜单,决定下次要试一下!

    原文作者:西柚喃木
    原文地址: https://www.jianshu.com/p/09716c533dd5
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞