CSS 转换效果

2D效果

移动translate

• 移动transform: translate(x,y);或者分开写 transform: translateX(n); transform: translateY(n);
• transform: translate(50%,50%);可以按百分比移动，相对于自身50%
• translate对行内标签无效

/* 水平垂直居中 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

旋转rotate

• transform: rotate(度数)为整数顺时针，负数为逆时针，例:transform: rotate(10deg)

转换中心点transform-origin

• transform-origin: x y;
• 中心点默认transform-origin: 50% 50%;
• 可设置方位名词top left bottom right center