css3变形基础
本文将详细介绍 CSS3 的四种变形，包括旋转、缩放、倾斜和位移。
旋转变形（rotate）可以沿 x、y 或 z 轴进行，分别使用 rotateX、rotateY 和 rotateZ 表达式，或使用旋转角度如 rotate(180deg) 表示。默认情况下，rotate() 沿着 2D 平面旋转。
缩放变形（scale）可以通过 scaleX、scaleY 和 scaleZ 来调整元素在 x、y 或 z 轴上的大小。scale(3) 表示在 x 和 y 轴上同时放大三倍。默认值为 1，大于 1 放大，小于 1 缩小。
倾斜变形（skew）可以沿 x 或 y 轴倾斜，使用 skewX 和 skewY 来指定。skew(30deg) 表示沿 x 轴倾斜 30 度。skew() 默认沿 x 轴倾斜。
位移变形（translate）可以在 x、y 或 z 轴上移动元素，使用 translateX、translateY 和 translateZ。translate(100px) 表示在 x 轴上向左移动 100px。
使用变形（transform）可以轻松地将已知或未知大小的元素居中在屏幕窗口中，只需在元素样式中添加 position:fixed 和 transform:translateX(-50%) translateY(-50%)。
要将已知或未知大小的子元素居中在父元素中，父元素使用 position:relative，子元素使用 position:absolute 和 transform:translate(-50%,-50%)。
为了改变变形元素的中心点位置，可以使用 transform-origin，通过指定坐标轴的位置来精确控制变形的起点。
变形可以组合使用，例如，可以同时进行旋转、缩放和位移。顺序不同，效果可能不同，因为元素在旋转时，其轴也跟着旋转。
要设置元素的变形类型，可以使用 transform-style 属性，flat 是默认值，表示 2D 空间变形，而 preserve-3d 表示 3D 空间变形。
为了创建 3D 效果，可以使用 perspective 属性设置景深，同时使用 transform:perspective(1000px) 和 transform:rotateY(60deg)。为了隐藏翻转元素的背面，可以添加 backface-visibility:hidden。
多重随机标签