Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE HTML>
<title>Testcase for outline around 3-D transform</title>
<style>
html, body { margin: 0; padding: 0; border: none }
div {
width: 100px;
height: 100px;
}
body > div {
margin-top: 200px;
margin-left: 200px;
transform-style: flat;
}
body > div > div {
transform: rotateX(30deg);
transform-origin: 50% 50%;
transform-style: preserve-3d;
border: 5px solid green;
margin: -5px;
}
body > div > div > div {
transform: rotateX(30deg);
width: 50px; margin-left: 20px; margin-top: -5px;
transform-origin: 50% 50%;
transform-style: preserve-3d;
border: 5px solid blue;
}
</style>
<div><div><div></div></div></div>