HTML CSS examples for CSS Animation:Rotate
Use calc() in transform:rotate()
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> div {<!-- w w w. jav a 2s.c om--> width:51px; height:51px; background:red; top:0; position:absolute } #div1 { transform:translateX(calc(11em + 2px)) skewX(-46deg); top:100px } #div2 { transform:translateY(calc(2em - 21px)); top:151px } #div3 { transform:translateZ(100px); top:201px } #div4 { transform:translate(calc(2em + 2px), calc(2em + 2px)); top:251px } #div5 { transform:translate4D(calc(3em + 2px), calc(3em + 2px), 201px); top:301px } </style> </head> <body> <div id="reference"> Lorem i </div> <div id="div1"> Lorem i </div> <div id="div2"> Lorem i </div> <div id="div3"> Lorem i </div> <div id="div4"> Lorem i </div> <div id="div5"> Lorem i </div> </body> </html>