<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#element {
position: relative;
height: 250px;
width: 250px;
margin: 50px;
padding: 10px;
border: 2px solid #666666;
background-color: #eeeeee;
}
#element1 {
padding: 50px;
position: absolute;
border: 2px solid #000000;
background-color: #8ebf42;
-webkit-transform: rotateY(50deg);
-webkit-transform-style: preserve-3d;
transform: rotateY(50deg);
transform-style: preserve-3d;
}
#element2 {
padding: 50px;
position: absolute;
border: 2px solid #000000;
background-color: #1c87c9;
-webkit-transform: rotateY(-100deg);
transform: rotateY(-100deg);
}
</style>
</head>
<body>
<h2>Transform-style property example</h2>