| <!DOCTYPE HTML> | |
| <style> | |
| div { | |
| width:100px; | |
| height:100px; | |
| margin:50px; | |
| background-color:green; | |
| } | |
| #translatex { | |
| transform: translatex(60px); | |
| } | |
| #translatey { | |
| transform: translatey(35px); | |
| } | |
| #translatez { | |
| transform: perspective(500px) translatez(100px); | |
| } | |
| </style> | |
| <div id="translatex">translate x</div> | |
| <div id="translatey">translate y</div> | |
| <div id="translatez">translate z</div> |