<!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> |