| <!DOCTYPE html> | |
| <style> | |
| div { | |
| width: 100px; | |
| height: 100px; | |
| background-color: blue; | |
| } | |
| .container { | |
| translate: 100px 100px; | |
| transform-style: preserve-3d; | |
| perspective-origin: 150% 150%; | |
| perspective: 500px; | |
| } | |
| #box1 { | |
| translate: inherit; | |
| } | |
| #box2 { | |
| translate: 100% -200% -500px; | |
| } | |
| #box3 { | |
| translate: 0px 0px 10em; | |
| } | |
| #box4 { | |
| translate: 300px; | |
| } | |
| </style> | |
| <div class="container"> | |
| container | |
| <div id="box1">1</div> | |
| <div id="box2">2</div> | |
| <div id="box3">3</div> | |
| </div> | |
| <div id="box4">4</div> |