Why does perspective changes fixed position in CSS?

Question

In the example of http://jsfiddle.net/sqk3k2nq/ , the elements are set to be fixed at the same position.

HTML:

    

        
                      

              相关标签:
       
      

Answer 1

Why does perspective changes fixed position in CSS?

Because perspective establishes a containing block similar to the way position: relative; does, which is stated in the transform module:

Perspective

The use of this property with any value other than none establishes a stacking context. It also establishes a containing block (somewhat similar to position: relative), just like the transform property does.

Since you're applying a perspective to every div in your example (and top, left properties) each div creates its own containing block and ends up pushed 20px to the right and bottom of the previous div.