Css3 3D转换

最新推荐文章于 2024-03-31 23:49:02 发布

黄丫丫07

最新推荐文章于 2024-03-31 23:49:02 发布

阅读量746

点赞数

文章标签： css3 3d css

本文链接：https://blog.csdn.net/m0_51495354/article/details/128114281

版权

特点：

近大远小
物体后面遮挡不可见

三维坐标系：

三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。

X轴：水平向右为正

Y轴：垂直向下为正

Z轴：垂直屏幕向外为正

3D位移和3D旋转：

主要知识点：

3D位移：translate3d（x,y,z）

3D旋转：rotate3d(x,y,z)

透视：perspective

3D呈现transform-style

3D位移：translate3d（x,y,z）:

Transform:translateX(100px):仅仅是在x轴上移动
Transform:translateY(100px):仅仅是在y轴上移动
Transform:translateX(100px):仅仅是在z轴上移动，单位一般为px
Transform:translate3D(x,y,z):其中x,y,z分别指要移动的轴的方向的距离

透视perspective：

如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）
模拟人类的视觉位置，可认为安排一只眼睛去看
透视我们也称为视距：视距就是人的眼睛到屏幕的距离
距离视觉点越近的在电脑平面成像越大，越远成像越小
透视的单位是像素

透视写在被观察元素的父盒子上面：

D：就是视距，视距就是一个距离，人的眼睛到屏幕的距离

Z:就是Z轴，物体距离屏幕的距离，z轴越大（正值）我们看到的物体就越大。

3D旋转rotated：

3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转

语法：

Transform:rotateX(45deg):沿着x轴正方向旋转45度

Transform:rotateY(45deg):沿着y轴正方向旋转45度

Transform:rotateZ(45deg):沿着Z轴正方向旋转45度

Transform:rotate3d(x,y,z,deg)：沿着自定义轴旋转deg角度

左手准则：

左手的拇指指向x轴的方向

其余手指的弯曲方向就是该元素沿着x轴旋转的方向

3D旋转rotate3d：transform：rotate3d（x,y,z,deg）:沿着自定义轴旋转deg角度

Xyz是表示旋转轴的矢量，是表示你是否希望沿着该轴选转，最后一个表示旋转的角度。

Transform:rotate3d(1,0,0,45deg)就是沿着x轴旋转45deg
Transform:rotate3d(1,1,0,45deg)就是沿着对角线旋转45deg

3D呈现transform-style：

控制子元素是否开启三维立体环境
Transform-style：flat子元素不开启3d立体空间默认的
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>Document</title>
    <style>
        .box1 {
            perspective: 500px;
        }

        .box {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            transition: all 2s;
            /* 让子盒子保持3d立体空间环境 */
            transform-style: preserve-3d;
        }

        .box:hover {
            transform: rotatey(60deg);
        }

        .box div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: pink;
        }



        .box div:last-child {
            background-color: aquamarine;
            transform: rotateX(60deg);


        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box">
            <div></div>
            <div></div>
        </div>
    </div>
</body>

</html>