<!DOCTYPE html >
<html lang="en" class="reftest-wait" >
<meta charset="utf-8" >
<title >Change a layer's transform making negative w component.
<style >
body {
background-color: white;
overflow: hidden;
}
#outer {
perspective: 500px;
perspective-origin: 350px 250px;
width: 700px;
height: 500px;
display: block;
top: 10px;
left: 10px;
position: absolute;
overflow: visible;
}
#container1 {
transform-style: preserve-3d;
transform: translateX(-50px) translateZ(350px) rotateY(-90deg);
}
#container2 {
transform-style: preserve-3d;
transform: translateY(-200px) translateX(50px) translateZ(350px) rotateY(90deg);
}
#scale {
transform-style: preserve-3d;
}
.negw {
transform: translateZ(1px);
}
.posw {
transform: translateZ(-500px);;
}
#dummy {
transform-style: preserve-3d;
transform: translateY(150px);
}
#square1, #square2 {
background-color: red;
width: 700px;
height: 200px;
}
</style >
<body >
<div id="outer" >
<div id="scale" class="negw" >
<div id="dummy" >
<div id="container1" >
<div id="square1" ></div >
</div >
<div id="container2" >
<div id="square2" ></div >
</div >
</div >
</div >
</div >
<script >
var scale = document.getElementById("scale" );
function doTest() {
scale.className = "posw" ;
document.documentElement.removeAttribute("class" );
}
document.addEventListener("MozReftestInvalidate" , doTest);
</script >
Messung V0.5 C=99 H=97 G=97
¤ Dauer der Verarbeitung: 0.2 Sekunden
¤
*© Formatika GbR, Deutschland