CSS之2D转换(transform)
程序员文章站
2024-01-24 19:10:58
...
平移
transform:translate(水平方向移动的距离，垂直方向移动的距离)
如果省略了第二个参数，默认为0
在使用translate()方法移动元素时，基点默认为元素中心点，然后根据指定的X坐标和Y坐标进行平移
transform: translate(400px,200px);
总结：
◆如果在translate()中设置一个值，那么代表当前元素是沿着水平方向移动，如果是正数则向右移动，反之向左移动。
◆如果在translate()中设置两个值，第一个值代表水平方向移动，第二个值代表垂直方向移动。
◆translate()中可以设置百分比，百分比是相对元素自己的宽度或者高度
应用：绝对定位的盒子居中显示
```java
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.one{
width: 400px;
height: 400px;
background-color: red;
position: relative;
}
.two{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
/*transform: translate(-50%);*/
/*margin-left: -50px;*/
}
</style>
</head>
<body>
<div class="one">
<div class="two">
</div>
</div>
</body>
</html>
旋转
transform:rotate(angle);
总结：
1.如果设置的是一个正数，那么代表当前元素按照顺时针方向旋转，反之逆时针
2.如果一个元素需要设置多个变形效果，可以使用空格把多个变形属性值隔开
transform:translate(30px) rotate(20deg);
缩放
transform:scale(x,y);
总结：
1.正数用来放大元素，小数用来缩小元素
2.如果第二个参数省略，则第二个参数等于第一个参数
3.如果设置两个值，那么第一个值代表的是水平方向的放大或缩小，第二个值代表的是垂直方向的放大或者缩小
4.负数表示翻转缩放元素
倾斜
transform:skew(30deg);
总结：
1.如果省略了第二个参数，默认为0
2.第一个参数表示水平方向的倾斜，第二个参数表示垂直方向的倾斜
改变变换的基点
transform-origin:center,center;
总结：
1.可以通过关键字设置 left | right | top | bottom | center
2.可以设置具体的值 transform-origin:20px,30px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.one{
width: 400px;
height: 400px;
background-color: red;
position: relative;
}
.two{
width: 100px;
height: 100px;
background-color: blue;
/*position: absolute;*/
/*left: 50%;*/
/*top: 50%;*/
/*transform: translateX(-50%) translateY(-50%);*/
/*margin-left: -50px;*/
margin: 0 auto;
transition: all 1s linear;
}
.one:hover .two{
/*transform: translate(500px) rotate(360deg);*/
/*transform: scale(2,3);*/
transform: skew(20deg,20deg);
}
</style>
</head>
<body>
<div class="one">
<div class="two">
</div>
</div>
</body>
</html>