transform 形变
主要用于:平移元素、旋转元素、缩放元素以及更多的特效来展示元素。
注意:对于变形的元素,有自己的堆叠上下文。经过缩放、平移等变形后的元素在视觉上虽然比以前更大或更小,但是元素在页面上所占用的空间仍然与变形前保持不变。对所有变形函数都成立。
基础语法:
transform: transform-list | none
在形变中分为二维形变以及三维形变
二维形变
平移、旋转、缩放、扭曲产生的形变。
注意:一个元素上只允许存在一个transform属性,如果写了两个 只有后面那个生效。
旋转 rotate
transform: rotate(370deg)
该段代码的表示的意思是元素顺时针旋转90度
注意点:
- 对于元素来说,deg表示的是旋转的单位,是degree角度值的缩写,默认的旋转中心为元素的中心点。
- 当rotate的值为正值时,元素顺时针旋转,负值时,元素逆时针旋转
- 如果旋转角度大于360度,那么totate函数将会对角度值进行取余,余数作为度数的显示效果即该角度的显示效果。
单独设置一个方向的选装
- rotateX:表示沿着水平方向轴旋转,默认的水平方向轴在元素的中间
- rotateY:表示元素沿着垂直方向轴旋转,默认的垂直方向轴在元素的中间
transform:rotateX(30deg);
transform:rotateY(30deg);
改变元素中心位置
transform-origin:left | right | top | bottom | center | % | px;
旋转中心的默认值时元素的中心位置
取值:第一个值表示水平、第二个值表示垂直
平移 translate
transform:translate(50px,50px) | %
- 可以传递两个参数,第一个表示水平位移,第二个参数表示垂直位移
- 只传递一个值时,表示水平位移
单独设置某个方向
-
translateX:水平位移
-
translateY:垂直位移
-
其中translate的值可以为负值,水平正值往右平移,负值相反,垂直方向正值向下平移,负值相反。
缩放 scale
transform:scale(1,1.5)
scale表示缩放,不需要单位,可以为小数,1表示百分百的原始大小,小于1表示缩小,大于1表示放大。
- 拥有两个参数,第一个参数表示水平方向、第二个表示垂直方向
- 当只写一个值时,表示元素整体放大(X、Y方向都会放大)
单独设置某个方向
-
scaleX:水平方向缩放
-
scaleY:垂直方向缩放
-
当取值为负值时,左右、上下将会颠倒。
扭曲 skew
代表扭曲或斜切,单位与旋转一样,可以为负值。
transform:skew(15deg)
- 存在两个参数,第一个表示水平,第二个表示垂直,当只写一个值时表示水平,此时第二个默认为0.
- 使用skew会导致图像或内容失真变形,因此在实际开发中,基本不会用到
单独设置某个方向
- skewX:水平方向扭曲
- skewY:垂直方向扭曲
复合语法
transform: rotate(50deg) translate(100px) skew(50deg) scale(2);
上述写法顺序没有固定,但要注意,顺序不同元素的效果也不一样。执行的顺序是从左至右逐一执行
- 在日常开发中,需要先考虑好元素变形的顺序,防止因为顺序导致莫名其妙的问题。
三维形变
三维和二维形变使用的都是transform属性
通过transform-style属性告知浏览器形变方式
transform-style:preserve-3d;
这段代码需要添加给三维形变元素的父元素,提前告知浏览器,我的子元素要变身了,然后浏览器会按照三维形变的方式去渲染父元素以内部的子元素。
在三维形变中,属性值都可以按照二维形变的书写方式书写,除了skew
三维形变在原有的x和y轴的基础上增加了一个z轴,z轴的方向就是我们面对屏幕的方向。
过渡动画 transition
过渡能控制一段时间内属性的值如何变成另一个值。因此我们可以让属性的值变化过程的时间延长,让整个变化行为看起来更加的自然、平滑。
过渡的基本属性
过渡使用四个属性进行定义:
- transition-property:定义元素的哪个属性需要过渡
- 比如更改颜色,那这个属性值就写
color
,更改宽度就写width
,如果想针对元素所有属性进行过渡,那就写all
- 比如更改颜色,那这个属性值就写
- transition-duration:定义元素属性过渡需要的时间,一般单位设置为秒(S)
- transition-timing-function:表示过渡的方式
- 对于过渡动画是有不同的过渡方法的,不同的过渡方法主要体现在从始态到终态的过程中,不同阶段有着不同的运动速度
- liner:线性过渡
- ease:平滑过渡
- ease-in:由慢到快
- ease-out:由快到慢
- ease-in-out:由慢到快再到慢
- 对于过渡动画是有不同的过渡方法的,不同的过渡方法主要体现在从始态到终态的过程中,不同阶段有着不同的运动速度
- trasnition-delay:表示过渡的延迟时间,单位为s(秒)
复合语法
transition: transition-property transition-duration transition-timing-function trasnition-delay
例如:
{
transition:all 1s ease 0s;
}
该段代码表示的意思是,元素所有的属性都会发生过渡,过渡时间为1s。过渡方式为ease(平滑过渡),延迟时间0s