- 位移
- 对行内元素无效
/* X轴位移 */
transform: translateX(50px);
transform: translate(50px);
/* Y轴位移 */
transform: translateY(50px);
/* X和Y轴位移 */
transform: translate(50px, 50px);
transform: translateX(50px) translateY(50px);
- 缩放
*对行内元素无效
/* X轴缩放，值可以为负数 */
transform: scaleX(1.5);
/* Y轴缩放, 值可以为负数 */
transform: scaleY(1.5);
/* X轴和Y轴缩放 */
transform: scale(1.5);
transform: scale(1.5, 1.3);
- 旋转
- 会影响坐标系，书写时需放在最后设置
/* 平面旋转,正值为顺时针，负值为逆时针 */
transform: rotateZ(30deg);
transform: rotate(30deg);
- 扭曲
/* X轴扭曲 */
transform: skewX(30deg);
transform: skew(30deg);
/* Y轴扭曲 */
transform: skewY(30deg);
/* X轴和Y轴扭曲 */
transform: skew(30deg, 30deg);
transform: skewX(30deg) skewY(30deg);
- 变换原点
transform-origin: 50px 50px;
transform-origin: left top;
transform-origin: 25% 25%;
/* 一个值时需注意值 */
transform-origin: left;
