<!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;
outline: 2px dashed blue;
}
body > div > div {
transform: rotateX(30deg);
transform-origin: 50% 50%;
transform-style: preserve-3d;
}
body > div > div > div {
transform: rotateX(30deg);
transform-origin: 50% 50%;
transform-style: preserve-3d;
}
body > div > div > div > div {
transform: scale(1.5, 3);
transform-origin: 50% 50%;
background: rgba(255, 255, 0, 0.4);
}
</style>
<div><div><div><div></div></div></div></div>