<!DOCTYPE html>
<html>
<head>
<style>
.perspective{
perspective:300px;
-webkit-perspective:300px;
width:150px;
height:150px;
background-color:rgb(210,210,210);
}
.internal1{
transform:rotateY(45deg);
-webkit-transform:rotateY(45deg);
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
width:150px;
height:150;
background-color:red;
}
.internal2{
transform:rotateX(45deg);
-webkit-transform:rotateX(45deg);
width:150px;
height:150px;
background-color:blue;
}
</style>
</head>
<body>
<div class="perspective">
<div class="internal1">
<div class="internal2">
</div>
</div>
</div>
<p>transform-style:preserve-3d;</p>
</body>
</html>