| <!DOCTYPE HTML> | |
| <style> | |
| div { | |
| width:100px; | |
| height:100px; | |
| margin:50px; | |
| background-color:green; | |
| } | |
| #translatex { | |
| -webkit-transform: translatex(calc(50% + 10px)); | |
| } | |
| #translatey { | |
| -webkit-transform: translatey(calc(40% - 5px)); | |
| } | |
| #translatez { | |
| -webkit-transform: perspective(calc(100px * 5)) translatez(calc(10px + 90px)); | |
| } | |
| </style> | |
| <div id="translatex">translate x</div> | |
| <div id="translatey">translate y</div> | |
| <div id="translatez">translate z</div> |