CSS 转换---transform
一、移动— translate
transform: translate(X，Y);
1.百分比单位是相对于自身元素的
2.不会影响到其他元素的位置
3.对行内标签没有效果
百分比单位的应用盒子垂直居中：
translate:(-50%,-50%);替换margin负值
应用代码如下：
<style>
.box1 {
position: relative;
width: 300px;
height: 300px;
background-color: aqua;
}
.box2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background-color: red;
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
二、旋转— rotate
transform:rotate(角度deg);
1.角度为正时，顺时针；负时，为逆时针
2.默认旋转的中心点是元素的中心点
旋转的应用三角的制作：
transform: rotate(45deg);
应用代码如下：
<style>
div {
position: relative;
width: 200px;
height: 35px;
border: 1px solid red;
}
div::after {
position: absolute;
content: '';
top: 8px;
right: 8px;
width: 10px;
height: 10px;
border-right: 1px solid red;
border-bottom: 1px solid red;
transform: rotate(45deg);
}
</style>
<body>
<div></div>
</body>
三、缩放—scale
transform:scale(x,y);
1.注意其中的x和y用逗号分隔
2.transform:scale(2,2) ：宽和高都放大了2倍
缩放应用缩放＋中心点定位
应用代码如下：
<style>
div {
width: 200px;
height: 200px;
background-color: red;
margin: 100px auto;
transition: all .8s;
transform-origin: left bottom;
}
div:hover {
transform: scale(.5, .5);
background-color: blue;
}
</style>
<body>
<div></div>
</body>
ps：元素转换的中心点可应用于移动、旋转、缩放等
总结–2D 转换综合写法
transform: translate() rotate() scale() ...等，
1.其顺序会影转换的效果。（先旋转会改变坐标轴方向）
2.同时有位移和其他属性的时候，位移要放到最前
扫一扫
200
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
