作者：谢文友6123 | 来源：互联网 | 2023-06-22 15:02
1、2D转换（可以对元素进行旋转、平移、缩放、转动。）InternetExplorer10,Firefox,和Opera支持transform属性.Chrome和Sa
1、2D转换（可以对元素进行旋转、平移、缩放、转动。）
Internet Explorer 10, Firefox, 和 Opera支持transform 属性.
Chrome 和 Safari 要求前缀 -webkit- 版本.
注意： Internet Explorer 9 要求前缀 -ms- 版本.
transform：translate（x,y）;//x代表沿x轴平移的距离，y代表沿y轴平移的距离
transform:rotate(deg);//deg代表旋转度数，如果为正数时，顺时针旋转；为负数时逆时针旋转
transform:scale(x,y);//x，y分别代表width和height的放大倍数
translate:skew(x,y);x代表水平方向旋转度数，y代表垂直方向旋转度数。
2、3D转换
| translate3d(x,y,z) |
定义 3D 转化。 |
| translateX(x) |
定义 3D 转化，仅使用用于 X 轴的值。 |
| translateY(y) |
定义 3D 转化，仅使用用于 Y 轴的值。 |
| translateZ(z) |
定义 3D 转化，仅使用用于 Z 轴的值。 |
| scale3d(x,y,z) |
定义 3D 缩放转换。 |
| scaleX(x) |
定义 3D 缩放转换，通过给定一个 X 轴的值。 |
| scaleY(y) |
定义 3D 缩放转换，通过给定一个 Y 轴的值。 |
| scaleZ(z) |
定义 3D 缩放转换，通过给定一个 Z 轴的值。 |
| rotate3d(x,y,z,angle) |
定义 3D 旋转。 |
| rotateX(angle) |
定义沿 X 轴的 3D 旋转。 |
| rotateY(angle) |
定义沿 Y 轴的 3D 旋转。 |
| rotateZ(angle) |
定义沿 Z 轴的 3D 旋转。 |
| perspective(n) |
定义 3D 转换元素的透视视图。 |
3、css3过渡transition （表示元素从一种样式过渡为另一种样式，必须要有指定添加效果的css属性和过渡时间）
例如：
4、css3动画animation @keyframes规则指定一个css样式和动画从目前样式转换为新的样式
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有