What is the reverse skew value when applying a CSS skew transform to an element?

I’m skewing and rotating an element with CSS transform and I’d like to make the inner element appear normal again by applying a “reverse” transformation. With rotation it’s easy: if you have an element that is rotated 45 degrees then the inner one would have a rotation of -45 degrees to look “normal” again.

Now, with rotation and skew it’s not so easy. See this example here: http://jsfiddle.net/8R4ym/56/

The text is rotated and skewed in a way that it’s at least positioned correctly but I can’t seem to find the “rules” for making it look perfectly normal applying some kind of reverse transforms. Any ideas? Thanks a lot!

Problem courtesy of: Seka

Solution

I believe this is the effect you’re looking for: http://jsfiddle.net/8R4ym/108/

I believe the non-communicative
operations are messing up your image. It matters in what order the skew and rotate are performed. “transform” seems to perform them from left to right (first rotate and then skew) and won’t let you use the “transform” attribute twice in a single definition space. I couldn’t find any way to change the order in which the operations are performed so I instead inserted another div so that skew would be performed before rotate the second time around. I hope this is what you’re looking for.

Edit: I just noticed a small difference in text size. I think you might have to put in a hack to increase text size by some percentage.

Solution courtesy of: Colm Sloan

责编内容来自:CSS3 Recipes (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » What is the reverse skew value when applying a CSS skew transform to an element?

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录