css元素旋转原点,使用transform-origin属性改变元素变换原点

使用CSS中的旋转函数可以让元素旋转指定的角度，比如transform:rotate(45deg)这条声明是表示将元素顺时针旋转45度，这里的旋转是按照一个默认的原点进行的，在CSS里可以使用transform-origin属性自定义元素变换的原点坐标，下面简单的做一个示例试试看：#x {

margin:100px;

width:150px;height:80px;

background-color:#49f;

transform:rotate(45deg);

}

这里给一个id为x的元素定义了旋转45度，旋转前后的对比图如下：

从对比图可以看出，元素的旋转原点默认是元素的中心，如果用transform-origin属性来表示，则可以是：transform-origin:center;

或者通过百分比定义原点，所以默认情况下也就相当于：transform-origin:50% 50%;

除了可以使用center定义原点，还可以使用left，right，top和bottom这几个值，与背景定位的定义方法类似，比如上面的示例中如果将原点设置为元素的左上角，则可以定义为：transform-origin:left top;

下图是旋转前后的对比图：