The issue is with the use of border. you can check this link How do CSS triangles work? and you will understand how border works and why you get this output. An alternative solution is to use rotation and border like this : .box { border: 1px solid; margin: 50px; height: 50px; position:relative; background: #f2f2f5; … Read more
The issue is that you are overriding the translate transformation. When you specify a new transformation (the one inside the animation) it override the first one. In your case you are removing the translation that is fixing the center alignment. You need to add them to the same transform property and pay attention to the … Read more
You have to put them on one line like this: li:nth-child(2) { transform: rotate(15deg) translate(-20px,0px); } When you have multiple transform directives, only the last one will be applied. It’s like any other CSS rule. Keep in mind multiple transform one line directives are applied from right to left. This: transform: scale(1,1.5) rotate(90deg); and: transform: … Read more
This is because the transform creates a new local coordinate system, as per W3C spec: In the HTML namespace, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants. This means that fixed … Read more
Answered here in the official W3 specifications under transformable element: an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose ‘display’ property computes to ‘table-row’, ‘table-row-group’, ‘table-header-group’, ‘table-footer-group’, ‘table-cell’, or ‘table-caption’ [CSS21]