位移transform:translate(x,y)
以页面左上角为0,0;transform:translate(x,y)表示移到某个位置
<style>
div {
position: relative;
width: 202px;
height: 220px;
background-color: pink;
transform:translate(100px,100px);
}
</style>
transform:translateX(100px); 只沿X轴移动
<style>
div {
position: relative;
width: 202px;
height: 220px;
background-color: pink;
transform:translateX(100px);
}
</style>
transform:translateY(100px); 只沿Y轴移动
<style>
div {
position: relative;
width: 202px;
height: 220px;
background-color: pink;
transform:translateY(100px);
}
</style>
借助margin来实现子盒子在父盒子中的居中显示 前提:知道元素的尺寸
<style>
div {
position: relative;
width: 200px;
height: 200px;
background-color: pink;
transform:translate(100px,100px);
}
p {
position: absolute;
width: 100px;
height: 100px;
background-color: purple;
top: 100px;
left: 100px;
margin-top: -50px;
margin-left: -50px;
/*向上、向左回退自己高度、宽度的一半*/
}
</style>
<body>
<div><p></p></div>
</body>
tranform:translate(-50%,-50%)实现盒子的居中显示 不知道元素尺寸的时候使用偏移百分比
<style>
div {
position: relative;
width: 200px;
height: 200px;
background-color: pink;
transform:translate(100px,100px);
}
p {
position: absolute;
width: 100px;
height: 100px;
background-color: purple;
top: 100px;
left: 100px;
transform: translate(-50%, -50%);
/* 如果不清楚子元素的尺寸,可以通过偏移子元素的宽高的一半 */
}
</style>
<body>
<div><p></p></div>
</body>
transform:translate()对于行内元素无效,例如span
相比定位和margin,translate的最大优点:不会影响到其他元素的位置
tranform:rotate() 旋转 单位'deg'
<style>
p{
position: absolute;
width: 100px;
height: 100px;
background-color: purple;
top: 100px;
left: 100px;
transform:rotate(45deg);
margin-top: -50px;
margin-left: -50px;
}
</style>
会发现这里用的是margin来做的居中而不是tranlate偏移,
是因为当translate和rotate分开写时会影响效果。rotate()被取消效果了
解决办法:
将偏移和旋转写到一起:transform:translate(-50%,-50%) rotate(45deg);
transition过渡效果
过渡写在本身上,谁做动画给谁加!
transition: all 1s;表示所有的变换(缩放/旋转/....)进行1s中
为什么需要添加过渡效果?
例如:旋转360度,直接写transform:rotate(360deg),无效果,因为360度=0度
所以当加上过渡效果后,就可以规定它在n秒内完成,就可以看到一个完整的变化过程
transform-origin:50px 50px 设置旋转中心
可以是像素、百分比或方位 (right,left,center,botton)
以被操作元素的左上角为0px,0px为基准做旋转中心的设置
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
margin: 100px auto;
transition: all 1s;
transform-origin: 50px 50px;
}
div:hover {
transform: rotate(360deg);
}
/*可以是百分比、方位名词(right,left,center,botton)
transform-origin: 50% 50%; 等同于transform-origin:center center
*/
</style>
transform:scale() 缩放
transfrom:scale(2,2);表示宽高都放大为原来的2倍;等同于transform:scale(2);同倍数缩放
<style>
div {
float: left;
margin: 10px;
overflow: hidden;
/* 放大超过的部分隐藏起来就可以实现多余的不扩出来了 */
}
img {
width: 200px;
transition: all 0.8s;
}
div img:hover {
transform: scale(1.3);
}
</style>