前端学习记录16-CSS3 2D效果-(2D移动、2D旋转、2D缩放)

transform(CSS3 2D转换)

简单来说是变形
移动:translate
旋转:rotate
缩放:scale

translate(移动)

可以改变元素在页面中的位置 类似定位

语法：

transform: translate(x,y) x轴移动位置，y轴移动位置
使用上述语法时，如果有任意一轴不移动 需要写 0 不能空着

只移动单个坐标

transform: translateX(200px)
transform: translateY(200px)

用处：例如鼠标放在某个商品的图片上，为了给用户提示 用户鼠标:hover后 图片会向上移动
就可以用移动的效果 并且不会影响其他人

优点：不会影响任何元素的位置

使用百分比移动，是针对transform元素本身的大小移动的

例如div宽度为200px 向x轴移动50%
tansform:translateX(50%); 具体移动大小为100px 针对transform元素本身

针对垂直水平居中效果 可以用移动来实现 并且不用计算

移动效果对于行内元素没有效果

用移动来实现水平垂直居中

div {
   
    position: relative;
    width: 500px;
    height: 500px;
    background-color: skyblue;
}
        
p {