rotate3d - CSS 3d-transform
HTML
<div id="ulb">
ULB<br/>
UPPER LEFT Backwards<br/>
rotate3d(-200,70,0,70deg);
</div>
<div id="urb">
URB<br/>
UPPER RIGHT Backwards<br/>
rotate3d(1,1,0,70deg);
</div>
<div id="llb">
LLB<br/>
LOWER LEFT Backwards<br/>
rotate3d(1,1,0,-70deg);
</div>
<div id="lrb">
LLB<br/>
LOWER RIGHT Backwards<br/>
rotate3d(1,-1,0,70deg);
</div>
CSS
#ulb {
position: absolute;
top: 100px;
left: 100px;
border: 7px dotted;
width: 200px;
height: 100px;
background-color: red;
font-size: 20px;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
#ulb:hover {
-webkit-transform: rotate3d(-200,70,0,70deg);
transform: rotate3d(-200,70,0,70deg);
}
#urb {
position: absolute;
top: 100px;
left: 400px;
border: 7px dotted;
width: 200px;
height: 100px;
background-color: red;
font-size: 20px;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
#urb:hover {
-webkit-transform: rotate3d(1,1,0,70deg);
transform: rotate3d(1,1,0,70deg);
}
#llb {
position: absolute;
top: 300px;
left: 100px;
border: 7px dotted;
width: 200px;
height: 100px;
background-color: red;
font-size: 20px;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
#llb:hover {
-webkit-transform: rotate3d(0,1,0,-70deg);
transform: rotate3d(0,1,0,-70deg);
}
#lrb {
position: absolute;
top: 300px;
left: 400px;
border: 7px dotted;
width: 200px;
height: 100px;
background-color: red;
font-size: 20px;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
#lrb:hover {
-webkit-transform: rotate3d(0,-1,0,70deg);
transform: rotate3d(0,-1,0,70deg);
}