css变换(transform)--2d变换
2019-10-17 本文已影响0人
手指乐
-
transform本身并不是动画，只是让元素显示转换后的效果
-
设置变换原点：
默认变换原点在设置变换元素的中点，通过transform-origin属性可以自定义变换原点
用法：
transform-origin: 10px 10px;
共两个参数，表示相对左上角原点的距离，单位px，第一个参数表示相对左上角原点水平方向的距离，第二个参数表示相对左上角原点垂直方向的距离；
两个参数除了可以设置为具体的像素值，其中第一个参数可以指定为left、center、right，第二个参数可以指定为top、center、bottom。
- translate：移动元素
用法：transform: translate(45px)
参数表示移动距离，单位px，
一个参数时：表示水平方向的移动距离；
两个参数时：第一个参数表示水平方向的移动距离，第二个参数表示垂直方向的移动距离。
也可以设置百分比，百分比是相对设置变换的本元素的大小
以下样式让元素在浏览器中居中
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>test</title>
<style>
.content {
padding: 10px;
background: green;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
border-radius: 5px;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
<script>
</script>
</head>
<body>
<div class="content">
</div>
</body>
</html>
top,left 偏移50%后，要补偿元素本身宽高的的一半才能居中， translate(-50%, -50%)刚好能实现这个需求
- 旋转 rotate
共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转
transform: rotate(45deg);
