2D旋转指的是让元素在2维平面内顺时针或逆时针进行旋转。(和transition过渡搭配使用效果体验更好)
语法格式:
transform:rotate(度数);
注意点:
rotate里面跟的是度数,单位是deg,例如transform:rotate(180deg),就是说旋转180度;
角度为正时,是顺时针旋转,为负时,是逆时针旋转,例如transform:rotate(180deg)和transform:rotate(-180deg);
默认旋转的中心点是以元素的中心点进行旋转。
改变旋转的中心点:transform-origin
我们可以设置元素以哪个位置来进行旋转。
语法格式:
transform-origin:x y;
注意点:
后面的参数x和y用空格隔开,不是逗号;
xy默认转换的中心点是元素的中心点(50% 50%);
还可以给xy设置像素或方位名词,例如:top bottom left right center。
如果想让元素以左下角为中心点旋转,可以这样写:
div {
width: 120px;
height: 120px;
background-color: pink;
/*跟方位名词,表示左下角 右下角就是 right bottom*/
transform-origin: left bottom;
transition: all .6s;
}
div:hover {
/*跟方位名词,表示左下角 右下角就是 right bottom*/
transform: rotate(180deg);
}