一、转换简介 1、什么是转换 改变元素在页面中的大小,位置,角度和形状的一种方式
2、转换分类 ①、2D转换 使元素在x轴和y轴上发生变化效果 ②、3D转换 在2D转换基础上,增加 z轴的变化效果 3、转换属性 属性:transform 取值: ①、none 默认值,不进行任何转换 ②、转换函数 表示一个或者多个转换函数,如果是多个函数的话,中间以空格分开 4、转换原点 属性:transform-origin 默认情况下,原点是在整个元素的中心位置处 取值:数值/百分比/关键字 两个值:表示 x轴 和 y轴的位置 三个值:表示 x轴 ,y轴 ,z轴的位置 二、2D转换 1、2D位移 ①、属性 和 函数 属性:transform 函数: translate(x) :元素在x轴上的位移距离,取值为正,向右移动,取值为负,向左移动 translate(x,y) : x表示x轴位移距离 y表示y轴位移距离,取值为正,向下移动,取值为负,向上移动 translateX(x) :只改变元素在x轴上的位置 translateY(y) :只改变元素在y轴上的位置 取值: 1、数值 2、百分比 2、2D缩放 ①、作用 改变元素在页面中的大小 ②、属性和函数 属性:transform 函数: scale(value),如果只给一个值,那么x轴和y轴将等比缩放 scale(x,y):改变 x轴和y轴的缩放比例 scaleX(x):只改变x轴的缩放比例 scaleY(y):只改变y轴的缩放比例 取值: 默认值 为1 缩小:0~1 之间的数值 放大:大于1的数值 3、2D旋转 ①、作用 改变元素在页面中的角度 ②、属性 和 函数 属性:transform 函数:rotate(ndeg) n取值为正,则顺时针旋转 n取值为负,则逆时针旋转 ③、注意 1、转换时,坐标轴会一起进行转换 2、转换原点可以影响转换效果 4、2D倾斜 ①、作用 改变元素在页面上的形状 ②、属性 和 函数 属性:transform 函数: skew(xdeg) : x轴倾斜指定角度 实际上时改变 y轴的倾斜角度 取值为正:逆时针 取值为负:顺时针 skewX(xdeg) : 效果同上 skewY(ydeg) : y轴倾斜指定角度 实际上是改变 x轴的倾斜角度 取值为正:顺时针 取值为负:逆时针 三、3D转换 ①、3D转换 增加 z轴 转换效果 ②、属性 属性:perspective 作用:模拟 人眼睛到 3D投射元素的距离 注意:该属性 需要加在 3D转换元素的父元素上 兼容性: 火狐:-moz-perspective: Chrome,Safari:-webkit-perspective Opera:-o-perspective ③、3D旋转 允许元素在 x轴,y轴,z轴上进行旋转操作
属性 和 函数 属性:transform 函数: rotateX(xdeg):以x轴为中心轴进行元素的旋转 rotateY(ydeg) rotateZ(zdeg) rotate3D(x,y,z,ndeg) x,y,z,如果取值为 0的话,说明该轴不参与旋转 x,y,z,如果取值为 1的话,说明该轴是参与旋转的
rotate3d(0,0,1,45deg)-- rotatez(45deg)
rotate3d(1,1,0,45deg) 四、3D位移 1、作用 改变元素在z轴上的位置 2、属性 和 函数 属性:transform 函数: translateZ(); translate3D(x,y,z) 3、属性 : transform-style 作用:规范当前元素的子元素如何去排列3D位置 取值: 1、flat 默认值,不保留子元素的3D位置 2、preserve-3d 保留子元素3d