transform
translate 平移
语法：
transform: translate(100px,100px); //xy同时移动
transform: translateX(100px); //x轴移动
transform: translateY(100px); //y轴移动
鼠标移入按钮上移
.el-button{
transition: all 1s;
}
.el-button:hover{
transform: translateY(-2px);
}
rotate 旋转
语法：
transform: rotate(360deg) //旋转
transform-origin: left top; //旋转的基点 设置旋转的中心点
鼠标移入旋转360度
.tr{
width: 180px;
height: 200px;
background-color: aqua;
transition: all 3s;
transform-origin: left top;
}
.tr:hover{
transform: rotate(360deg);
}
scale 缩放
语法：
transform: scale(1.5) //xy同时缩放
transform: scale(1.5,1) //x缩放1.5,y缩放1
鼠标移入放大
.tr{
width: 180px;
height: 200px;
background-color: aqua;
transition: all 3s;
transform-origin: left top;
}
.tr:hover{
transform: scale(1.5);;
}
skew 倾斜
语法：
transform: skew(30deg,30deg); //xy同时倾斜倾斜
transform: skewX(30deg); //x轴倾斜
transform: skewY(30deg); //y轴倾斜
利用倾斜形成平行四边形
.tr{
width: 180px;
height: 50px;
background-color: aqua;
transform: skewX(30deg);
}
实现效果移入打开
<div class="tr">
<div class="q"></div>
<div class="h"></div>
</div>
.tr{
width: 180px;
height: 250px;
position: relative;
&:hover .h{
transform: skewY(25deg);
}
div{
width: 180px;
height: 250px;
position: absolute;
top: 0;
left: 20px;
border-radius: 0 30px 40px 40px;
transform-origin: top left;
}
.q{
z-index: 1;
background-color: aqua;
}
.h{
transition: all 0.5s;
background-color: rosybrown;
transform: skewY(10deg);
}
}
transform 复合写法
语法：
transform:A() B() C();
执行顺序:从右到左
transition
transition 完整写法：
transition：过渡属性 持续时间 速度曲线 延迟时间
transition：all 1s linear 1s;
所有属性添加过渡，过渡持续1秒 匀速 延迟1秒执行
