Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<title>CSS Test (Transforms): Filter on an element in a preserve-3d scene</title>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
html { overflow: hidden }
body {
perspective: 500px;
perspective-origin: 400px 299px;
background: rgb(200, 200, 200);
}
div {
width: 1140px;
height: 990px;
transform-style: preserve-3d;
position: absolute;
top: 299.5px;
left: 400px;
transform: translate3d(-570px, -495px, 500px) rotateY(64.24deg) translateY(23px) rotateX(90deg);
background-image: url('support/tile-bg.png');
background-size: 100% 100%;
}
p.patch {
margin: 0;
position: absolute;
background: red;
height: 200px;
width: 800px;
left: 0px;
top: 400px;
z-index: -1;
}
</style>
<div></div>
<!--
This reference is the same as the test, but with this additional red
patch underneath it (in z-order). This means that if any content is
missing when drawing the test, the red patch will show through and the
test will fail. But if all the content is drawn, then the test will
pass.
-->
<p class="patch"></p>