2d

2d

  设置2d操作的属性是transform,具体操作包括移动，缩放和旋转。

移动

  transform: translate(x,y)用以设置移动，第一个参数x代表的是向x方向移动的距离，第二个参数y代表向y方向移动的距离，假设有如下结构

<div></div>
<div></div>

设置其样式为

div {
    width: 100px;
    height: 100px;
    background-color: pink;
    transition: all 1s;      /*添加过渡效果*/
    margin: 0 auto;
}
div:first-child:hover {
    transform: translate(200px,100px);
}

  可以通过translateX()和translateY()单独设置移动的距离。

缩放

  transform: scale(缩放的倍数)用以设置缩放。重新设置样式为:

transform: scale(1.1);

旋转

  transform: rotate(角度deg)用以设置旋转，角度为正顺时针旋转，角度为负逆时针旋转。

transform: rotate(45deg);

设置以某个点旋转

  上面的旋转是以盒子中心那个点进行旋转的,使用transform-origin: x y可以设置以某个点进行旋转，原点为左上角。当旋转的点为四个角时，可以用left,top等代替，比如我要以右下角旋转，则我可以写为

transform: rotate(45deg);
transform-origin: right bottom;