站长查询工具,素材网站建设需要多少费用,网页设计公司经营范围,wordpress上传服务器域名CSS变换
根据 CSS 的变换的功能特性#xff0c;它可以分为位移、旋转、缩放、倾斜和透视#xff1a; 也可以分成2D变换和3D变换#xff0c;2D变换是二维平面上进行的#xff0c;即 X 轴和 Y 轴。这些变换不涉及 Z 轴。3D 变换允许元素在三维空间中进行操作#xff0c;这些…CSS变换
根据 CSS 的变换的功能特性它可以分为位移、旋转、缩放、倾斜和透视 也可以分成2D变换和3D变换2D变换是二维平面上进行的即 X 轴和 Y 轴。这些变换不涉及 Z 轴。3D 变换允许元素在三维空间中进行操作这些变换涉及 X 、Y 和 Z 轴。这使得元素可以在视觉上远离或靠近观察者创造出更加逼真的三维效果。 transform 属性包含多个变换函数时它的顺序很重要是从左向右应用的从左到右乘以变换属性中的每个变换函数。
.element {transform: translate(60px, 60px) scale(1.5, 1.5) rotate(45deg);
}.element {transform: rotate(45deg) scale(1.5, 1.5) translate(60px, 60px);
}transform 属性中的 translate(60px, 60px) 和 rotate(45deg) 两个变换函数互换了一下位置。最终呈现给用户的结果是完全不同的。
CSS 的变换函数有近 20 种不同的函数它们分别用来帮助你对元素进行平移、旋转、缩放、倾斜和透视 平移translate() 、translateX() 、translateY() 、translateZ() 和 translate3d() 旋转rotate() 、rotateX() 、rotateY() 、rotateZ() 和 rotate3d() 缩放scale() 、scaleX() 、scaleY() 、scaleZ() 和 scale3d() 倾斜有时也称扭曲 skew() 、skewX() 和 skewY() 。注意它没有 3D 空间的概念在 CSS 中并没有 skewZ() 和 skew3d() 两个函数 透视perspective() 它有对应的一个 CSS 属性即 perspective
除了上面所列的 CSS 变换函数之外还有两个矩阵函数它们分别是 2D 矩阵 matrix() 和 3D 矩阵 matrix3d() 。
平移函数 translate() x 轴移动语法 : transform: translateX(x);y 轴移动语法 : transform: translateY(y);x / y 轴移动语法 : transform: translate(x, y); 沿 x 轴水平移动正值向右移动负值向左移动 沿 y 轴上下移动正值向下移动负值向上移动 可以是一个长度值length、百分比值percentage还可以是其他的数学函数表达式值 注意translate() 函数的参数是个百分比值时该百分比值是相对于元素自身的大小计算而不是父容器尺寸计算即 x 轴方向相对于元素的 width 计算y 轴方向相对于元素的 height 计算。
/* 只沿 x 轴移动元素 */
.element {transform: translateX(var(--positionX));/* 等同于 */transform: translate(var(--positionX), 0);
}/* 只沿 y 轴移动元素*/
.element {transform: translateY(var(--positionY));/* 等同于 */transform: translate(0, var(--positionY));
}缩放函数 scale() scale() 函数的值为 1 时元素将保持原样不变既不放大也不缩小 scale() 函数的值为 0 时元素将缩小到不可见 scale() 函数的值大于 1 时元素将会放大 scale() 函数的值小于 1 时元素将会缩小 scale() 函数可以被视为 scaleX() 和 scaleY() 的简写函数 scaleX() 函数用于指定元素在水平方向上的缩放倍数而垂直方向保持不变 scaleY() 函数用于指定元素在垂直方向上的缩放倍数而水平方向保持不变 注意当 scale() 函数传递两个值时只要其中有一个值为 0 元素都会被缩小到不可见。另外当两个值相同时第二个参数值y 轴可以省略不写 。
scale3d() 函数允许同时指定三个方向x、y 和 z上的缩放倍数用于三维变换。 x表示水平方向的缩放倍数。 y表示垂直方向的缩放倍数。 z表示在Z轴上的缩放倍数。 电视开关动画实例: layer animation {keyframes closeTV {from {transform: scale(1, 1);filter: brightness(100%);}to {transform: scale(0.5, 0);filter: brightness(800%);}}.switch:has(:checked) ~ .video video {animation: closeTV 0.28s ease-out both;}
}旋转函数 rotate() rotateX() 函数 元素绕 x 轴进行 3D 旋转 rotateY() 函数元素绕 y 轴进行 3D 旋转 rotateZ() 函数元素绕 z 轴进行 3D 旋转 rotate3d() 函数元素在三维空间中绕指定轴进行旋转
如果 rotate() 函数使用正角度值则元素进行顺时针旋转反之元素进行逆时针旋转。
rotate() 函数的值除了正负角度值之外你还可以使用其他描述角度值的单位比如 角度值 deg 一个完整的圆是 360deg 梯度值 grad 一个完整的圆是 400grad 弧度值 rad 一个完整的圆是 2π 弧度 圈 turn 一个完整的圆是 1turn 1 度deg 1.11111 梯度grad 1 度deg π ÷ 180 弧度rad 1 圈turn 360 度deg rotateZ() 和 rotate() 的视觉效果上是一样的 两个 3D 变换函数可以由单个轴的变换函数组合而成即 translate3d(tx, ty, tz) translateX(tx) translateY(ty) translateZ(tz) scale3d(sx, sy, sz) scaleX(sx) scaleY(sy) scaleZ(sz) 倾斜函数 skew() skew()通过沿水平方向 x 轴和或垂直方向 y 轴倾斜元素来扭曲元素从而呈现出倾斜的外观 skew() 接受两个参数第一个是水平方向倾斜元素的角度第二个是垂直方向倾斜元素的角度如果第二个参数省略不写将表示垂直方向不做任何角度的倾斜即为 0。 skewX() 使元素沿着水平方向按指定的角度倾斜元素 skewY() 使元素沿着垂直方向按指定的角度倾斜元素
