深入了解css：巧妙利用transform

          前几天工作中遇到了个小问题，虽然很快就解决了，但是还是拿上来和大家分享一下，很有可能以后的工作中会遇到。

就是上图中左上角打折的效果，因为黄色背景是有效果的，所以只能用图片，但是如果给文字逆时针翻转45度图片也会跟着翻转，就会发生变形，所以我决定先给图片顺时针旋转45度，

变成

然后再css中加入

-webkit-transform: rotate(-45deg);

让图片逆时针再旋转回来，正好变成了我们想要的效果。
就像前段时间讨论的 巧妙利用white-space:nowrap 一样，只要深入研究透彻css的每个属性，它总会给你意想不到的效果。