css3 3D变形

作者: 朴客 | 来源:发表于2020-06-19 21:48 被阅读0次

6_动画_其他属性
Tailwind Transform
css3 3D变形
css3的3D变形
CSS3之变形
CSS3 Transform——transform-origin
CSS3 transform介绍
CSS3 transform介绍
css3基础点（1）
CSS3 Transform变形（3D转换）

左手坐标系

伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。

rotateX()

就是沿着 x 立体旋转

    img {
        transition: all 0.6s;
    }

    img:hover {
        transform: rotateX(360deg);
    }

rotateY()

    img:hover {
        transform: rotateX(360deg);
    }

rotateZ()

    img:hover {
        transform: rotateZ(360deg);
    }

透视(perspective)

电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。

透视可以将一个2D平面，在转换的过程当中，呈现3D效果。

perspective有两种写法

作为一个属性，设置给父元素，作用于所有3D转换的子元素
作为transform属性的一个值，做用于元素自身

透视原理：近大远小；
浏览器透视，把近大远小的所有图像透视在屏幕上。
perspectiv:视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置。
注：并非任何情况下都需要透视效果，设置给父元素，作用于所用3D转换的子元素。

body {
        perspective: 500px;/* 视距，越小越明显 */
    }

transform: translate3d(x,y,z); x和y可以是px 可以是% z只能是px。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>

      body {
            perspective: 600px;;
        }
        
    div {
        width: 200px;
        height: 200px;
        background-color: red;
        margin: 100px auto;
        transition: all 1s;
    }

    div:hover {
         transform: translate3d(100px, 100px, 300px);
    }

    </style>
</head>
<body>
    <div></div>
    
</body>
</html>

例：文字上升效果


        h2 {
            text-align: center;
            transform: translate3d(0, 100px, 0);
            transition: all 2s;
        }

        h2:hover {
            transform: translate3d(0,0,0);
        }

backface-visibility

backface-visibility属性定义当元素不面向屏幕时是否可见。

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
    div {
        width: 224px;
        height: 224px;
        margin: 100px auto;
        position:  relative;
    }

    div img {
        position: absolute;
        top: 0;
        transition: all 0.6s;

    }

    div img:first-child {
        z-index: 1;
        backface-visibility: hidden;/* 不是正面对象屏幕就隐藏 */
    }

    div:hover img {
        transform: rotateY(180deg);
    }   
    </style>

</head>
<body>

    <div>
    <img src="images/qian.svg" alt="">
    <img src="images/hou.svg" alt="">
    </div>
    
</body>
</html>