<!DOCTYPE html>
<style>
div {
width: 100px;
height: 100px;
background-color: blue;
}
.container {
transform: translate(100px, 100px);
transform-style: preserve-3d;
perspective-origin: 150% 150%;
perspective: 500px;
}
#box1 {
transform: inherit;
}
#box2 {
transform: translate3d(100%, -200%, -500px);
}
#box3 {
transform: translate3d(0px, 0px, 10em);
}
#box4 {
transform: 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>