旋转和平移 [英] Rotate and translate

查看:87
本文介绍了旋转和平移的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在旋转和定位一行文本时遇到了一些问题。现在它只是位置的作品。

c $ c> #rotatedtext {
transform-origin:left;
transform:rotate(90deg);
transform:translate(50%,50%);
}

html只是纯文本。

解决方案

原因是因为您使用transform属性两次。由于CSS规则与级联,如果它们具有相同的特异性,最后一个声明将胜出。因为两个转换声明都在同一个规则集中,所以是这样。



它正在做的是:


  1. 将文本旋转90度。好的。

  2. 将50%减50%。确定,这是与步骤1相同的属性,因此,此步骤忽略第1步。

请参阅http://jsfiddle.net/Lx76Y/ ,并在调试器中打开它以查看覆盖的第一个声明



由于翻译正在覆盖旋转,因此您必须在相同的声明中合并它们: http://jsfiddle.net/Lx76Y/1 /



要使用空格分隔的转换列表:

  #rotatedtext {
transform-origin:left;
transform:translate(50%,50%)rotate(90deg);
}

请记住,它们在链中指定,因此首先应用翻译,然后旋转之后。


I'm having some problems rotating and positioning a line of text. Now it's just position that works. The rotation also works, but only if i disable the positioning.

CSS:

#rotatedtext {
    transform-origin: left;
    transform: rotate(90deg);
    transform: translate(50%, 50%);
}

The html is just plain text.

解决方案

The reason is because you are using the transform property twice. Due to CSS rules with the cascade, the last declaration wins if they have the same specificity. As both transform declarations are in the same rule set, this is the case.

What it is doing is this:

  1. rotate the text 90 degrees. Ok.
  2. translate 50% by 50%. Ok, this is same property as step one, so do this step and ignore step 1.

See http://jsfiddle.net/Lx76Y/ and open it in the debugger to see the first declaration overwritten

As the translate is overwriting the rotate, you have to combine them in the same declaration instead: http://jsfiddle.net/Lx76Y/1/

To do this you use a space separated list of transforms:

#rotatedtext {
    transform-origin: left;
    transform: translate(50%, 50%) rotate(90deg) ;
}

Remember that they are specified in a chain, so the translate is applied first, then the rotate after that.

这篇关于旋转和平移的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆