移动web第二天

小技巧

动态的谷歌浏览器中的px值：

一、空间转换

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

空间转换也叫3D转换

属性：transform

1.空间位移

语法：

• transform: translate3d(x, y, z);
• transform: translateX(值);
• transform: translateY(值);
• transform: translateZ(值);

取值（正负均可）

• 像素单位数值
• 百分比

透视

用perspective属性实现透视效果

• 属性（添加给父级）

perspective:值;

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

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

• 作用

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

2.空间旋转

语法：

transform:rotateZ(值);

transform:rotateX(值);

transform:rotateY(值);

左手法则

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

拓展

rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度

x，y，z取值为0-1之间的数字

立体呈现

使用transform-style: preserve-3d呈现立体图形

实现方法

添加transform-style: preserve-3d;

使子元素处于真正的3d空间。

呈现立体图形步骤

1. 盒子父元素添加transform-style: preserve-3d；
2. 按需求设置子盒子的位置（位移或旋转）。

注意

空间内，转换元素都有自已独立的坐标轴，互不干扰

空间缩放

语法：

transform: scaleX(倍数);

transform: scaleY(倍数);

transform: scaleZ(倍数);

transform: scale3d(x, y, z);