移动端开发之2D与3D转换

1.过渡-----transition

作用:让元素的样式慢慢的变化
取值:过渡完成的时间(秒/s)
注: 1)过渡属性需要直接给当前的元素添加
2)过渡需要元素有两个不同的状态才会生效(默认/hover)
3)过渡属性给不同状态添加会有不同的效果(默认:移入和移出都有效果/hover:移入有,移出没
有)

2.2d转换

2D坐标系:X轴------浏览器片面水平向右
Y轴-----浏览器平面垂直向下
属性名:transform

2.1 缩放----scale

scaleX(缩放的倍数):元素沿X轴方向进行缩放
scaleY(缩放的倍数):元素沿Y轴方向进行缩放
scale(X,Y):沿X轴和Y轴缩放对应的倍数,当X与Y值相同时,可以简写为一个值

2.2 旋转----rotate

rotate(旋转的角度:数字+deg)
注:旋转的时候对应的坐标系也会发生改变

2.3 平移-----translate

translateX(距离):沿X轴平移对应的距离
translateY(距离):沿Y轴平移对应的距离
translate(X,Y):沿X轴和Y轴平移对应的距离
注:平移可以写百分比,百分比对应着当前元素的宽高的百分比(定位居中实例)平移的元素不会改变其他元素的布局,与绝对定位性质相同

2.4 倾斜-----skew(了解)

skewX(角度):X轴不动,Y轴向X轴倾斜对应的角度
skewY(角度):Y轴不动,X轴向Y轴倾斜对应的角度
skew(X,Y)

2.5 转换原点-----transform-origin

取值:预定义值(left/center/right,top/center/bottom)
具体箱数值(X,Y)

3. 3D转换

3D坐标系:
X轴------浏览器片面水平向右
Y轴-----浏览器平面垂直向下
Z轴------垂直于浏览器向外(指向用户)

3.1 旋转----rotate

沿着X轴或Y轴的旋转才可以称之为3D旋转

3.2 平移----translate

沿着Z轴的平移才可以称之为3D平移

3.3 视距-----perspective(眼睛距离元素的距离)

作用:让子元素有近大远小的效果
取值:当值越大时,近大远小的效果越不明显
当值越小时,近大远小的效果越明显
一般情况下取值为1000px左右
注:视距只是让子元素有近大远小的效果,元素还在一个平面中,不是一个真正的3D元素

3.4 3D转换—transform-style

让元素变成一个正常的立方体,让其中的子元素在其立方体中进行布局
取值:flat—平面(默认值)
preserve-3d ---------立体元素
注:该属性是给父元素添加,其子元素进行3D布局