变形transform

几个常用的transform

这些属性都是不影响原来的布局的。

rotate()

通过指定的角度参数使元素相对原点进行旋转，正值则顺时针。

scale()

让元素根据中心原点对对象进行缩放。

1
2
3

scale(x,y)
scale(x)
scale(y)

translate()

1
2
3

transform:translate(x,y)
transform:translate(x)
transform:translate(y)

关于translate百分比的疑惑

实验一下就清楚了

.box1
{

border: 40px solid red;
border-width:0 0 0 100px;
padding-left: 100px;
width:100px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:translate(50%);


}
.box2 {
width: 150px;
height: 120px;
display: inline-block;
background:blue;
}

<div class="box2"></div>
<div class="box1">Hello World</div>

可见，百分比是相对自身的长宽（padding + width + border）

transform-origin

默认情况之下，其中心点是居于元素X轴和Y轴的50%处。