Css3之高级-5 Css转换(简介、2
一、转换简介
转换概述
- 转换是使元素改变形状、尺寸和位置的一种效果
- 又称为变形，即，可以向元素应用2D 或 3D 转换，从而对元素进行旋转、缩放、移动或倾斜
- 2D 转换: 使元素在 X轴 和 Y轴 平面上发生变化，改变其形状、尺寸和位置
- 3D 转换:元素还可以在 Z 轴上发生变化
转换属性
- transform 属性向元素应用 2D 或者 3D 转换
- 指定一组转换函数，取值
- transform: none/transform-function;
- none
- 默认值，表示元素不进行转换
- transform-function
- 表示一个或者多个转换函数，中间以空格分开
转换的原点
- transfor-origin 属性用来指定元素的转换原点位置
- 默认情况下，转换的原点在元素的中心点
- 或者是 X轴 和 Y轴的 50% 处
- transform-origin:数值/百分比/关键字;
- 一个值: 表示所有轴的位置
- 两个值; 表示 X 轴 和 Y 轴
- 三个值: 表示 X 轴、Y 轴 和 Z 轴
2D 转换
- translate() 方法将元素从其当前位置移动
- 移动到 x 坐标和 y 坐标位置参数
- translate(x) 或者 translate(x,y)
- 可取值
- 数值、百分比
- 也可以是负值
- 也可以使用单向位移函数
- translate(x)
- translate(y)
2D 位移
2D 缩放
- scale() 方法用于改变元素的尺寸
- 根据给定的宽度(X轴)和高度(Y轴)
- scale(x) 或者 scale(x,y)
- 一个参数时，第二个参数默认与第一个值相等
- 可取值
- 默认值为1
- 缩小: 0 到 1 之间的数据
- 放大: 大于 1 的数值
- 也可以使用单向缩放函数
- scaleX(x)
- scaleY(y)
2D 旋转
- rotate() 方法用于旋转元素
- 根据原点，将元素按照顺时针旋转给定的角度
- 允许负值，元素将逆时针旋转
- rotate(deg)
2D 倾斜
- skew() 方法用于让元素倾斜
- 以原点位置，围绕 X轴 和 Y轴 按照一定的角度倾斜
- 可能会改变元素的形状
- skew(x)或者 skew(x,y)，取值为角度
- 也可以使用单向倾斜函数
- skewX(x)
- skewY(y)
二、3D 转换
perspective 属性
- perspective 属性定义 3D 元素距视图的距离，以像素计
- 为元素定义perspective 属性时，其子元素会获得透视效果，而不是元素本身
- 只影响 3D 转换元素
- 浏览器兼容性
- Chrome 和 Safari 支持替代的 -webkit-perspective 属性
3D 位移
- 3D 位移可以改变元素在 Z轴位置
- 3D 位移主要包含
- translateZ(z)
- translate3d(x,y,z)
3D 旋转
- 3D 旋转主要包含
- rotateX(deg)
- rotateY(deg)
- rotateZ(deg)
- rotate3d(x,y,z,deg)
3D 缩放
- 3D 缩放主要包含
- scaleZ(z)
- scale3d(x,y,z)
总结：本章内容主要介绍了 Css3之高级-5 Css转换(简介、2D转换、3D转换)