HTML5CSS3③(3D转换、浏览器私有属性)
1. 3D转换
3D
的特点: 近大远小,物体和面遮挡不可见
三维坐标系:
- x 轴:水平向右 – 注意:x 轴右边是正值,左边是负值
- y 轴:垂直向下 – 注意:y 轴下面是正值,上面是负值
- z 轴:垂直屏幕 – 注意:往外边的是正值,往里面的是负值
3D
转换:
3D
位移:translate3d(x, y, z)
3D
旋转:rotate3d(x, y, z)
- 透视:
perspctive
3D
呈现transfrom-style
1.1 3D转换之移动translate3d
3D
移动就是在 2D
移动的基础上多加了一个可以移动的方向,就是 z 轴方向
transform: translateX(100px)
:仅仅是在 x 轴上移动transform: translateY(100px)
:仅仅是在 y 轴上移动transform: translateZ(100px)
:仅仅是在 z 轴上移动transform: translate3d(x, y, z)
:其中x、y、z 分别指要移动的轴的方向的距离
注意:x, y, z 对应的值不能省略,不需要填写用 0 进行填充
1.2 3D转换之透视perspective
- 如果想要网页产生
3D
效果需要透视(理解成3D
物体投影的2D
平面上 - 实际上模仿人类的视觉位置,可视为安排一直眼睛去看
- 透视也称为视距,所谓的视距就是人的眼睛到屏幕的距离
- 距离视觉点越近的在电脑平面成像越大,越远成像越小
- 透视的单位是像素
透视需要写在被视察元素的父盒子上面
body {
perspective: 1000px;
}
1.3 3D转换之旋转rotate3d
3D 旋转指可以让元素在三维平面内沿着 x 轴、y 轴、z 轴 或者自定义轴进行旋转
transform: rotateX(45deg)
– 沿着 x 轴正方向旋转 45 度transform: rotateY(45deg)
– 沿着 y 轴正方向旋转 45 度transform: rotateZ(45deg)
– 沿着 z 轴正方向旋转 45 度transform: rotate3d(x, y, z, 45deg)
– 沿着自定义轴旋转 45 deg 为角度
正方向判断:左手准则
- 左手的手拇指指向轴的正方向
- 其余手指的弯曲方向就是该元素沿着 轴旋转的正方向
1.4 3D转换之呈现transform-style
transform-style
控制子元素是否开启三维立体环境
transform-style: flat
代表子元素不开启3D
立体空间,默认的transform-style: preserve-3d
子元素开启立体空间- 代码写给父级,但是影响的是子盒子
2. 浏览器私有前缀
浏览器私有前缀是为了兼容老版本的写法,比较新的版本的浏览器无需添加
-moz-
:Firefox私有属性-ms-
:IE私有属性-webkit-
:Safari、Chrome私有属性-o-
:Opera私有属性