组合CSS3变换保持参考系统 [英] Combine CSS3 transforms keeping the reference system

问题描述

使用此CSS3变换：

  transform：translateX（100px）
  / pre> 
 
 
一个元素向右移动100像素。
 
 
 
 
 
 
  transform：rotate（180deg）
  
元素旋转180度。
 
 
 
但如果两者结合使用：
  transform：rotate（180deg）translateX（100px）
  
 180度并移动到左侧。因为变换的参考系统链接到元素而不是网页。有没有办法结合变换保持网页的参考系统？ 
解决方案
对我来说，改变transform语句的顺序就够了：
  transform：translateX（100px）rotate（180deg）
  
这样，元素被旋转，仍然从右边移动。 
（Chrome）
 
With this CSS3 transform:
transform: translateX(100px)
An element is moved to the right 100 px.

With this one:
transform: rotate(180deg)
The element is rotated 180 degrees.

But if both are combined:
transform: rotate(180deg) translateX(100px)
The element is rotated 180 degrees and moved to the LEFT. Because the reference system of the transform is linked to the element and not to the webpage. Is there any way to combine transforms keeping the reference system of the webpage?  
解决方案
For me, it was enough, changing the order of the transform statements:
transform: translateX(100px) rotate(180deg)
This way, the element was rotated and still moved from the right.
(Chrome)

                        
这篇关于组合CSS3变换保持参考系统的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！