包括:位移、旋转、缩放、倾斜。
下面的方法都是transform里的,记得加上。
展示效果为变化前后对比。
translate(tx, ty); 只沿着x轴、y轴移动
translateX(tx) 只沿着x轴移动
translateY(ty) 只沿着y轴移动
translateZ(tz) 只沿着z轴移动
translate3d(tx, ty, tz) 沿着x轴、y轴、z轴移动
transform: translate(20px, 20px);
scale(sx, sy) 沿着x、y轴缩放,小于1缩小,大于1放大
scaleX(sx) 沿着x轴缩放
scaleY(sx) 沿着y轴缩放
scaleZ(sx) 沿着z轴缩放
scaleZ(sx, sy, sz) 沿着x、y、z轴缩放
transform: scale(1.2, 1.2);
rotate(angle) 沿着z轴旋转
rotateX(angle) 沿着x轴旋转
rotateY(angle) 沿着y轴旋转
rotateZ(angle) 沿着z轴旋转
rotate3d(angle) 沿着x、y、z轴旋转
transform: rotate(30deg);
skew(xangle, yangle) 沿着x、y轴倾斜
skewX(xangle) 沿着x轴倾斜
skewY(xangle) 沿着y轴倾斜
transform: skew(10deg, 10deg);
多种变形函数用空格隔开即可,注意不要用逗号。
例如这样:
transform: translate(20px, 20px) scale(1.2, 1.2) skew(10deg, 10deg) scale(1.2, 1.2);
transfrom-origin:x坐标 y坐标(数值、left、top…)
放在需要改变的选择器上。
例如:没有设置时默认为中心。 (这里加了过渡方便对比)
transform-origin: 0 0;
用来给变形加上过渡动画的,例如我们hover时才让目标变形,就可以加上过渡动画,来展示效果。说白了就是给其加上计算出来的过程。
transition–property 设置指定属性进行过渡动画
transition-duration 设置动画的持续时间
transition-timing-function 设置动画的渐变速度,其值有linear(匀速)、ease(由快到慢,由快倒满)、ease-in(由快到慢)、ease-out(由快到慢)
transition-delay 设置动画延迟时间
,号隔开即可
transition: 属性 持续时间 渐变速度 延迟时间
transition-property: width, height, color;
transition-duration: 1s, 1.5s, 2s;
transition-timing-function: ease, linear, ease-in;
transition-delay: 0s, 1s, 0s ;
也可以这样:
transition: width 1s ease 0s, heigth 1.5s linear 1s, color 2s ease-in 0s;
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
*{
padding:0;
margin:0;
}
body{
width:100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
div{
background: red;
width:200px;
height: 200px;
transition: width 2s ease 0s, heigth 4s linear 1s, background-color 4s;
}
div:hover{
background: blue;
width:300px;
height: 300px;
transform: rotate(360deg);
}
style>
head>
<body>
<div>
div>
body>
html>