0
点赞
收藏
分享

微信扫一扫

空间转换 3D

小典典Rikako 2022-02-11 阅读 30
3dp2plinq

1 3D坐标系

3D 坐标系比2D 多了一个Z轴。

一定要记住3个坐标轴取值的正反:

  • X 轴 往右越大,是正值, 否则反之

  • Y 轴 往下越大,是正值,否则反之

  • Z轴 (指向我们)越大,是正值,否则反之

 2   3D位移

有完整写法:

transform: translate3d(x, y, z);

 只不过在很多情况下,我们经常喜欢分开写:

transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(100px);

 3   透视

透视的作用: 空间转换时,为元素添加近大远小、近实远虚的视觉效果

语法: perspective: 800px;

透视注意事项:

  1. 取值范围经常在 800px ~ 1200px 之间。

  2. 一定给父亲添加

  3. 透视距离也称为视距,所谓的视距就是人的眼睛到屏幕的距离。

  • 其中 d 为透视的距离

  • z 是 translateZ 的距离, 这个距离靠近我们,盒子越大

 

 4   3D旋转

有了透视的加持,我们3d旋转效果会比较明显。

4.1   rotateX

类似单杠旋转。

          注意:默认的旋转中心在盒子的中心位置。

 

4.2   rotateY

类似钢管舞。

5   左手法则

一定要搞清楚X轴和Y轴如何旋转的,旋转的度数是正值还是负值。

规则:

  1. 大拇指指向X轴正向方(右), 则四指指向的方向是旋转的方向

  2. 大拇指指向Y轴正向方(下), 则四指指向的方向是旋转的方向

6   立体呈现

让子盒子在父盒子内有空间的展示,此时可以给父亲添加

语法:   transform-style: preserve-3d;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>立体呈现</title>
    <style>
        .cube {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            transition: all .5s;
            background-color: pink;
            /* 3d呈现 */
            transform-style: preserve-3d;
        }

        .cube div {
            /* 1.1 添加定位 让2个盒子叠加在一起 */
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
        }

        .front {
            /* 向我们面前拉(移动) */
            background-color: orange;
            /* transform: translateZ(200px); */
            transform: translateZ(100px);

        }

        .back {
            background-color: green;
            transform: translateZ(-100px);
        }

        .cube:hover {
            transform: rotateY(65deg);
        }
    </style>
</head>

<body>
    <div class="cube">
        <div class="front">前面</div>
        <div class="back">后面</div>
    </div>
</body>

</html>

 

 

 

举报

相关推荐

0 条评论