转换： 作用使元素在位置或者形状发生一定的改变
属性：transform：；
属性值：位移 单位px
transform：translate（x，y）；
当只取一个值，表示水平方向
当取两个值，表示水平和垂直方向
transform：translateX（）；
transform:translateY（）；
取正值，右下走 取负值，左下走
代码：<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 39px;
height: 26px;
background-color: red;
margin: 8px;
transform: translate(px,27px);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
旋转； 单位deg(弧度)
transform：rotate（）；
取正值，顺时针旋转
取负值，逆时针旋转
注意：默认旋转的中心点为宽高的一般
transform-origin：； 修改元素的中心点
旋转会旋转整个坐标轴，当位移和旋转同时存在，推荐位移在旋转的前面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 39px;
height: 26px;
background-color: red;
margin: 8px;
}
.box:hover{
transform: translate(29px,27px) rotate(60deg);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
缩放：取值number 0-1 缩小， >1放大，默认值为1
transform：scale（x，y）；
当只取一个值，等比例缩放
当只取两个值，表示水平方向和垂直方向
transform: scalex()；
transform：scalex（）；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 2006px;
height: 2665px;
background-color: white;
margin: 8px;
overflow: hidden;
}
.box img:hover{
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="box">
<a href="tt.png">
<img src="tt.png">
</a>
</div>
</body>
</html>
倾斜：单位deg
transform：skew（）；
当只取一个值，等比例缩放
当只取两个值，表示水平方向和垂直方向
transform: skew()；
transform：skew（）；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 200px;
height: 265px;
background-color: green;
margin: 8px;
}
.box:hover{
transform: skew(38deg,34deg);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
扫一扫
330
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
