css之3D变换

3D变换的x，y，z轴是分别效果是：

x轴旋转的话，就是头和脚进行转动

y轴旋转的话，就是左右手进行转动

z轴旋转的话，就是整个身体平铺在旋转。

上面是针对旋转的意思去，但是对于其他的类似一样，就是这样子去理解x，y，z轴的在哪里的

transform: rotateX(360deg);
transform: rotateY(360deg);
transform: rotateZ(360deg);

变换跟2D同理

最主要的区别是透视视图“景深”

<!--景深的作用：
1、让3D场景有近大远小的效果（就是肉眼距离屏幕的距离）
2、是一个不可以继承的。但他可以作用于后代元素（不是作用于本身的）
原理：
景深越大，灭点越远，元素变形更小
景深越小，灭点越近，元素变形更大

灭点：灭点就是你看到的尽头
景深基点：视角的位置
组合变换的话，放本身的话，一定要放在首位

如果要让景深有效果，又想放在本身的元素上，就需要进行组合处理。例如：

transform:perspective(100px) rotateX(360deg) ;

总体代码如图所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                
            }
            #wrap{
                width: 400px;
                height: 400px;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -200px;
                margin-top: -200px;
                border: 1px solid black;
                /*perspective: 100px;*/
                
            }
            #inner{
                width: 200px;
                height: 200px;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -100px;
                margin-top: -100px;
                border: 1px solid pink;
                border-radius: 50%;
                text-align: center;
                line-height: 200px;
                font-weight: bold;
                transition: 2s;
            }
            #wrap:hover #inner{
                /*transform: rotateX(360deg);
                transform: rotateY(360deg);
                transform: rotateZ(360deg);
                transform: scaleX(2);
                transform: scaleZ(2);*/
                /*transform: translateZ(100px);*/
                transform:perspective(100px) rotateX(360deg) ;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="inner">
                Rainbow
            </div>
        </div>
    </body>
</html>

 


-->

 

posted @ 2018-09-11 18:20  你若精彩，蝴蝶自来  阅读(414)  评论(0)  编辑  收藏  举报