perspective-transforms-equivalence.html (1507B)
1 <!doctype HTML> 2 <meta charset="utf8"> 3 <title>Perspective with transforms equivalencies.</title> 4 <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> 5 <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#perspective-property"> 6 <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> 7 <link rel="match" href="perspective-transforms-equivalence-ref.html"> 8 <!-- 9 Perspective with different transforms can have small anti-aliasing 10 pixel differences, so the test should fuzzy patch to the ref. 11 --> 12 <meta name="fuzzy" content="maxDifference=0-178;totalPixels=0-538"> 13 <style> 14 15 #container { 16 transform: translate(-200px, -200px); 17 width: 500px; 18 height: 500px; 19 perspective: 500px; 20 } 21 22 #container > div { 23 width: 100%; 24 height: 100%; 25 transform-style: preserve-3d; 26 transform: translateZ(-250px) rotateZ(45deg); 27 } 28 29 #container > div > div { 30 width: 100%; 31 height: 100%; 32 position: absolute; 33 background-color: rgba(3, 121, 255, 0.3); 34 box-sizing: border-box; 35 border: 3px solid black; 36 } 37 38 /* The following four should be equivalent. */ 39 #one { transform: rotateY(90deg) translateZ(250px); } 40 #two { transform: rotateZ(90deg) rotateX(90deg) translateZ(250px); } 41 #three { transform: rotateY(-90deg) translateZ(-250px); } 42 #four { transform: rotateZ(-90deg) rotateX(90deg) translateZ(-250px); } 43 </style> 44 45 <div id="container"> 46 <div> 47 <div id="one"></div> 48 <div id="two"></div> 49 <div id="three"></div> 50 <div id="four"></div> 51 </div> 52 </div>