CSS之3D转换（translate3d，透视perspective，旋转rotated3，transform-style)

2024-05-07 20:46:53

目录

1、translate3d

2、透视perspective

3、rotated3d旋转

4、3D呈现transform-style（重要)

1、translate3d

在浏览器中，y轴正方向垂直向下，x轴正方向水平向右，z轴正方向指向外面。

z轴越大离我们越近，即看到的物体越大。z轴单位一般是px。z轴说物体到屏幕的距离。

/* transform: translate3d(100px, 100px, 100px); x,y不能省略写，不想要就写0。

2、透视perspective

透视又称视距，人的眼睛到屏幕的距离，距离视觉点越近在电脑上成像越大。

根据近大远小，物体遮挡后面看不见的原理。

透视写在被观察元素的父盒子上，透视越小（距离），我们看到的越大。

视距越小放大效果越明显，translateZ越大放大效果越明显。

当translateZ>perspective时，物体移到了视点后方，无法成象，所以看不到盒子。

3、rotated3d旋转

单位deg。旋转的方向依据左手准则，左手大拇指指向坐标轴的正向，其余手指弯曲的方向就是坐标轴的正向。

transform: rotate3d(1, 1, 1, 45deg);

这表示x,y,z都正向旋转45deg,也可以只rotatedX...

4、3D呈现transform-style（重要)

/* transform-style: preserve-3d; */默认是flat，不开启，代码写给父盒子但是影响的是子盒子。

开启3d效果。

CSS之3D转换（translate3d，透视perspective，旋转rotated3，transform-style)相关推荐

CSS 2D 3D转换
CSS3 2D转换为什么称为2D转换呢 2D转换之移动 translate最大的优点是不会影响其他元素的位置像margin-top等都会影响其他元素的布局,上面的往上面走,下面的会浮上去填满使用 ...
CSS：3D效果（位移、旋转）
浏览器平面为二维平面,以浏览器可视区域左上角为原点,X轴为左上到右上,正方向为右:Y轴为左上到左下,正方向为下. 要想实现3D效果,我们需要引入Z轴,这条Z轴垂直于屏幕,以出平面为正方向. trans ...
25CSS3中的3D转换
技术交流QQ群:1027579432,欢迎你的加入! 1.现实中的3D有什么特点? 近大远小物体后面遮挡不可见 2.三维坐标系三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的. x轴:水 ...
web前端基础 html5+css3（十二.2D转换，动画，3D转换）
一.2D转换 1.2D转换之移动translate (1)transform:translate(x,y); transform:translate(100px,100px); (2)transfor ...
CSS3新特性详解(三)：CSS3 2D转换和3D转换 transform 变形使用详解
关于CSS3新特性,在上篇博文中"CSS3新特性详解(二):CSS3 字体@font-face详解.如何创建和修改woff字体文件及text-shadow等文本效果",讨论了C ...
十五、CSS 3新特性详解（三）——3D转换(位移、旋转、呈现)、透视perspective、旋转rotateX、Y、Z、呈现transform-style
HTML5 第三天一. 认识 3D 转换 3D 的特点近大远小物体和面遮挡不可见三维坐标系 x 轴:水平向右 – 注意:x 轴右边是正值,左边是负值 y 轴:垂直向下 – 注意:y 轴下面是正 ...
CSS -- CSS3中3D转换相关属性讲解（translate3d，rotate3d，perspective，transform-style）
文章目录 3D转换 1 三维坐标系 2 3D移动 translate3d 3 透视 perspective 4 3D 旋转 rotate3d 5 3D旋转 rotate3d 6 3D呈现 transf ...
3D转换之三维坐标系，透视旋转等基础知识
一.三维坐标系三维坐标系就是指立体空间,立体空间是由3个轴共同组成的. 1.x轴:水平向右注意:x右边是正值,左边是负值 2.y轴:垂直向下注意:y下面是正值,上面是负值 3.z轴: ...
六、CSS 速览 —— 平面转换、3D转换、动画
平面转换.3D转换.动画字体图标 iconfont 阿里图标库从图标库引用素材平面转换 transition: all 1s; 设置元素变换动画 transform: translate(px, ...

最新文章

热门文章