css 旋转对称 |css动画链接

/* 以横向旋转为例子 */
.test {
transform: rotateY(180deg);
}

上面的代码会将类名为“test”的元素以横向为轴心旋转180度。通过这个简单的旋转，大家就可以轻松实现元素的镜像对称。

/* 元素旋转45度 */
.test {
transform: rotate(45deg);
}

除了横向翻转，CSS还支持以任意角度旋转元素。比如通过将元素旋转45度，就可以实现一个简单的菱形效果。当然，需要注意的是，如果旋转的角度不是90度的倍数，那么旋转后的元素可能出现部分像素溢出。

/* 元素旋转并扭曲 */
.test {
transform: skew(-20deg, 10deg) rotate(-30deg);
}

除了简单的旋转效果，大家还可以通过扭曲等操作来实现更为复杂的效果。比如上面的代码就将元素先向左扭曲20度，再向上扭曲10度，最后再向左旋转30度，从而达到了一个扭曲的效果。