移动web-空间转换

空间转换

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

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

        空间转换也叫3D转换

        1 使用translate实现元素空间位移效果

            代码：

                transform: translateX(值);

                transform: translateY(值);

                transform: translateZ(值);

                transform: translate3d(x, y, z);

            取值（正负均可）

                1 像素单位数值

                2 百分比

            注意：x轴正方向往右 y轴正方向往下 z轴正方向为屏幕指向眼睛

 

        2 使用perspective属性实现透视效果

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

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

            代码：

                perspective: 值;

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

            注意：该perspective属性添加给父元素

        3 使用rotate实现元素空间旋转效果

            代码：

                transform: rotateZ(值);

                transform: rotateX(值);

                transform: rotateY(值);

                拓展：

                    rotate3d(x, y, z, 角度度数)  用来设置自定义旋转轴的位置及旋转的角度 x y z取值为0-1之间的数字

            判断旋转方向（左手法则）

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

            注意：x轴正方向往右 y轴正方向往下 z轴正方向为屏幕指向眼睛

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

            呈现立体图形步骤

                1. 盒子父元素添加transform-style: preserve-3d；

                2. 按需求设置子盒子的位置（位移或旋转）

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

        5 使用scale实现空间缩放效果

            语法

                transform: scaleX(倍数);

                transform: scaleY(倍数);

                transform: scaleZ(倍数);

                transform: scale3d(x, y, z)