H5C3—3D转换

最新推荐文章于 2023-09-15 14:35:08 发布

小白媛

最新推荐文章于 2023-09-15 14:35:08 发布

阅读量247

点赞数

分类专栏： 3D转换 h5c3 旋转文章标签： css3 html 3d

本文链接：https://blog.csdn.net/shj125/article/details/114024924

版权

h5c3 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

3D转换

1 篇文章 0 订阅

订阅专栏

旋转

1 篇文章 0 订阅

订阅专栏

一、3D转换（变换）

1.3d转换是改变标签在3坐标系上的位置和形状的一种技术
3D特点：

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

1.1.3维坐标系

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

x轴水平向右注意： x 右边是正值，左边是负值
y轴垂直向下注意： y 下面是正值，上面是负值
z轴垂直屏幕由屏幕里面指向屏幕的外面注意：往外面是正值，往里面是负值

2.3d移动translate3d

3d移动在2d移动的基础上多加了一个可以移动的方向，就是z轴方向
语法：
（1） transform:translate3d(x,y,z) 其中 x y z 分别指要移动的轴的方向的距离，xyz是不能省略的，如果没有就写0
（2） translform:translateX(100px) 仅仅是移动在x轴上移动
（3） translform:translateY(100px) 仅仅是移动在Y轴上移动
（4） translform:translateZ(100px) 仅仅是移动在Z轴上移动
注意:
因为z轴是垂直屏幕，由里指向外面，所以默认是看不到元素在z轴的方向上移动，想要看到，可以使用下面的视距属性设置

2.1.视距 perspective（了解）

人在看物体时，有个规律，如 远的物体看起来小 近的物体看起来大
**perspective视距：就是用来设置人和物体的距离

上图总结：
（1）d:视距，眼睛到屏幕的距离，视距与物体大小的关系成反比。 (近大远小：视距变小，眼睛离屏幕越来越近，物体离眼睛越来越近，物体变大----近大 )
（2）z:translateZ，物体距离屏幕的距离，z轴距离与物体大小的关系成正比。 (近大远小：translateZ变大，物体离眼睛越近，物体变大 ----- 近大)
（3）z，并不是z轴，其实是translateZ。视距和translateZ其实都是在Z轴上的距离。
（4）perspective ，透视，理解为视距。（也可以理解为3D眼睛，给元素添加3D效果，并且想看到，必须带上3D眼睛，给父亲添加perspective ）
perspective字面意思是：透视。
e.g.
（1）设置物体的 translateZ 一般大于 0 如 transform:translateZ(100px)
（2）设置人和物体的距离（视距）这个值规定要设置给物体的父元素 perspertive:1000px
（3）动态改变物体的 translateZ 即可观察效果
注意：这个效果很像放大效果，但其实是不一样的。

2.2.perspective与translateZ

d：视距，眼睛到屏幕的距离，视距与物体大小的关系成反比。
z：translateZ，物体距离屏幕的距离，轴距离与物体大小的关系成正比。
从上述结果中发现，perspective与translateZ都可以调整物体的大小。那么我们要使用哪个呢？

perspective是给父元素添加的，而translateZ是给自己添加的。

我们可能会碰到这样的情况，一个父盒子中有多个子盒子。我们给父盒子设置一个固定的视距perspective，然后子盒子设置不同的translateZ，这样子盒子就会有一个相同视距下的不同的大小。
而且，物体想实现3D效果，必须添加透视perspective。

如何使用：
父元素添加一个固定的perspective，子元素再添加translateZ，才会有3D效果。

必须配合使用。

虽然两个都可以让盒子大小改变，但是必须配合使用才行。

让盒子变大变小，一般不会改变perspective，而是是调整translateZ来改变。

2.3.总结：

（1）translateZ的值和perspertive都要大于0 否则容易出现兼容性问题

（2）translateZ：近大远小（translateZ距离近（值越大）物体越大，近大）

（3）translateZ：往外是正值

（4）translateZ：往里是负值

3.3d旋转rotate3d

3.1.介绍

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

    transform:rotateX(45deg)：沿着x轴正方向旋转 45度
    transform:rotateY(45deg) ：沿着y轴正方向旋转 45deg
    transform:rotateZ(45deg) ：沿着Z轴正方向旋转 45deg
    transform:rotate3d(x,y,z,deg)： 沿着自定义轴旋转 deg为角度（了解即可）

3.2.rotateX

旋转的度数有正负，正负值往哪边旋转，这个是有规律的。我们看左手准则：
左手准则：
对于元素旋转的方向的判断我们需要先学习一个左手准则
比如要判断某元素沿着x轴是怎么旋转的
(1)左手的手拇指指向 x轴的正方向
(2)其余手指的弯曲方向就是该元素沿着x轴旋转的方向了
在这里插入图片描述

总结：rotateX( 正值 )，旋转方向是向后倒，向屏幕里旋转。

3.3.rotateY

Y轴方向旋转的正负值，也是影响了旋转的方向，方向如何区分？依然看左手准则：
左手准则：
(1)左手的手拇指指向 y轴的正方向
(2)其余手指的弯曲方向就是该元素沿着y轴旋转的方向（正值）
如图：
在这里插入图片描述

3.4.rotateZ

左手准则
z轴正方向是屏幕到眼睛的方向，四指的方向是顺时针方向（反之逆时针）
在这里插入图片描述

3.5.rotate3d-自定义轴（了解）

语法：

 transform:rotate3d(x,y,z,deg)： 沿着自定义轴旋转 deg为角度（了解即可）

xyz是表示旋转轴的矢量，是标示你是否希望沿着该轴旋转，最后一个标示旋转的角度。
transform:rotate3d(1,0,0,45deg) 就是沿着x轴旋转 45deg
transform:rotate3d(1,1,0,45deg) 就是沿着对角线旋转 45deg
理解：
矢量（vector）是一种既有大小又有方向的量，又称为向量。
xyz是矢量，x指定1说明沿着x轴旋转。0说明不沿着x轴旋转。（0，1有大小，又代表x或y或z，也有方向）

4.3D呈现transform-style

4.1.介绍

控制子元素是否开启三维立体环境。
transform-style: flat 子元素不开启3d立体空间默认的（flat：平的，平面）
transform-style: preserve-3d; 子元素开启立体空间（preserve：[prɪˈzɜ:v] 保持）
代码写给父级，但是影响的是子盒子
perspective是开启3D效果，transform-style: preserve-3d是保持3D效果 ***
这个属性很重要，后面必用

上图效果不佳，看下图：
在这里插入图片描述

完整代码：

<style>
        body { 
            perspective: 500px; /* 让子盒子有3D效果，其实也可以添加给.box */
        }
        
        .box {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            transition: all 2s;  /* 悬浮旋转添加过渡效果 */
            /* 让子元素保持3d立体空间环境 */
            transform-style: preserve-3d;
        }
        
        .box:hover { /* 悬浮在外层盒子上，进行y轴旋转 */
            transform: rotateY(60deg);
        }
       .box div {  /* 子绝父相，通过定位让俩div与box位置重叠  */
            position: absolute; 
            top: 0;
            left: 0; 
            width: 100%;
            height: 100%;
            background-color: pink;
        }
        
        .box div:last-child {/* 第二个div，x轴旋转，向后倒 */
            background-color: purple;
            transform: rotateX(60deg);
        }
    </style>
</head>

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

4.2.perspective 和 transform-style 区别

（1）perspective 有继承性，可以给父元素，爷爷辈的添加
（2）transform-style 没有继承性，只能给要保持3D效果的元素的直接父元素添加

  body {
            /*perspective 有继承性 ，可以给父元素，爷爷辈的添加.... */
            /* 这个案例，只能给body添加此属性，section和div都需要有近大远小的效果 */
            /* 近大远小 */
            perspective: 1000px;
            /* transform-style 没有继承性，只能给要保持3D效果的元素的直接父元素添加 */
            /* 我们现在希望每个div保持3D效果，只能给section添加此属性 */
            /* 让子元素保持3D效果 */
            /* transform-style: preserve-3d; */
        }

二、浏览器私有前缀

浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加

1. 私有前缀

-moz-：代表 firefox 浏览器私有属性
-ms-：代表 ie 浏览器私有属性
-webkit-：代表 safari、chrome 私有属性
-o-：代表 Opera 私有属性

2. 提倡的写法

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;

小白媛

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
H5C3—3D转换

一、3D转换（变换）1.3d转换是改变标签在3坐标系上的位置和形状的一种技术3D特点：近大远小。物体后面遮挡不可见1.1.3维坐标系3维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的x轴水平向右注意： x 右边是正值，左边是负值y轴垂直向下注意： y 下面是正值，上面是负值z轴垂直屏幕由屏幕里面指向屏幕的外面注意：往外面是正值，往里面是负值2.3d移动translate3d3d移动在2d移动的基础上多加了一个可以移动的方向，就是z轴方向语
复制链接

扫一扫