CSS3 3D空间转换

目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果

空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成一个立体空间，z轴与视线方向相同。

rotate3d(x,y,z,a)坐标

位移

1.空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。

2.空间转换也叫3D转换

3.属性：transform

语法

transform: translate3d(x, y, z);

transform: translateX(值);

transform: translateY(值);

transform: translateZ(值);

取值（正负均可）

1.像素单位数值

2.百分比

注意点：

Z轴正值是向我们眼前走来，负值刚好相反

translate3d(x, y, z)可以像素，不能只写一个值，如果只需要z，x和y要写0，不能去掉

空间旋转

目标：使用rotate实现元素空间旋转效果

语法

transform: rotateZ / X / Y(值); // Z / X / Y轴3D旋转

transform:rotate3d(x,y,z,a) //X,Y,Z表示旋转轴X,Y,Z坐标方向的矢量、数值0~1,a就是旋转角度

左手法则：

判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

透视

目标：使用perspective属性实现透视效果

1.思考：生活中，同一个物体，观察距离不同，视觉上有什么区别？

答：近大远小、近清楚远模糊

2.思考：默认情况下，为什么无法观察到Z轴位移效果？

答：Z轴是视线方向，移动效果应该是距离的远或近，电脑屏幕是平面，默认无法观察远近效果

3.属性（添加给父级）

perspective: 值;

取值：像素单位数值，数值一般在800 – 1200。

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

注意点：

1.值越小，元素离我们的视觉越近

2.想要网页有3D效果，必须要加透视

3.要在父元素添加

4.透视的单位是像素px

立体呈现

思考：使用perspective透视属性能否呈现立体图形？

答：不能，perspective只增加近大远小、近实远虚的视觉效果

transform-style：指定嵌套元素是怎样在三维空间中呈现。

transform-style：preserve-3d(表示所有子元素在3D空间中显示) / flat(表示所有子元素在2D空间中显示)

注意点：

1.要在父元素添加，但是影响的是子元素

空间缩放

语法

transform: scaleX(倍数);

transform: scaleY(倍数);

transform: scaleZ(倍数);

transform: scale3d(x, y, z);

注意点：如果想让一个元素有3d效果

1.可以添加透视：persperctive:值

2.仅仅添加透视，只是从正前言观察，可以看到近大远小的效果

3.如果想从侧面观察，可以添加transform:rotate3d改变观察的角度

4.前面三个并不能真正的生成 3d 效果，如果需要3d效果，还需要为父容器设置 transform-style:preserve-3d

CSS3 3D空间转换相关推荐

CSS高级功能—3D空间转换（位移、透视、空间旋转）—3D导航—3D缩放
一.空间(3D)转换目标:使用transform属性实现元素在空间内的位移.旋转.缩放等效果. 属性:transform (1)位移效果(Z轴方向需要配合perspective透视使用) 空间位移的 ...
3D空间转换（位移、旋转、立体呈现）
重点语法: transform:translateX(值);沿x轴位移,y.z轴同理. transform:rotateX(值);沿x轴旋转,y.z轴同理. perspective: 像素单位数值;实 ...
移动web 空间转换 3D
移动web 空间转换 3D 空间转换 3D 3D位移透视 3D旋 rotateX rotateY 左手法则立体呈现空间转换 3D 3D坐标系 3D 坐标系比2D 多了一个Z轴. 一定要记住3个坐 ...
空间转换-3D-在空间中的位移、旋转、缩放
闲来无事来整理一下关于3D空间转换的位移,旋转,缩放. 3D空间位移 1.空间位移是指分别在X轴,Y轴.Z轴进行位移. 如果看成一个坐标系的话也是由位移的正负的 X轴:右移动为正方向 Y轴:下移动为正 ...
html3d转换,CSS3 3D 转换
# CSS3 3D 转换 ## 3D 转换 CSS3 允许您使用 3D 转换来对元素进行格式化. 在本章中,您将学到其中的一些 3D 转换方法: * rotateX() * rotateY() 点击下 ...
CSS3的2D转换和3D转换，你了解了嘛？
css3的2D转换和3D转换 CSS3大纲: 本次讲解css3带来了两种转换:2D转换和3D转换 1. 2D转换转换( transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移(tr ...
CSS3 3D转换和旋转木马案例
文章目录前言有什么特点一.三维坐标系 3D转换二.3D移动translate3d 三.透视perspective 四.translateZ 五.3D旋转rotate3d 六. 3D呈现tran ...
【CSS3】平面转换空间转换动画
目录平面转换平移缩放倾斜旋转 transform复合属性空间转换空间位移空间旋转呈现立体图形空间缩放动画动画属性 steps逐帧动画多组动画平面转换 CSS3中动画效果包括 ...
css3 3d旋转兼容模式下,CSS3 3D 转换
3D Transforms CSS3 允许您使用 3D 转换来对元素进行格式化. 在本章中,您将学到其中的一些 3D 转换方法:rotateX() rotateY() 点击下面的元素,来查看 2D 转 ...

CSS3 3D空间转换

CSS3 3D空间转换相关推荐

最新文章

热门文章