| OLD | NEW |
|---|
| 1 <!DOCTYPE> | 1 <!DOCTYPE> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <title>Switching layer in and out of preserve-3d</title> | 4 <title>Switching layer in and out of preserve-3d</title> |
| 5 | 5 |
| 6 <style type="text/css" media="screen"> | 6 <style type="text/css" media="screen"> |
| 7 body { | 7 body { |
| 8 font-family: 'Lucida Grande', Verdana, Arial; | 8 font-family: 'Lucida Grande', Verdana, Arial; |
| 9 font-size: 12px; | 9 font-size: 12px; |
| 10 } | 10 } |
| 11 #container { | 11 #container { |
| 12 position: relative; | 12 position: relative; |
| 13 height: 300px; | 13 height: 300px; |
| 14 width: 300px; | 14 width: 300px; |
| 15 margin: 50px 100px; | 15 margin: 50px 100px; |
| 16 border: 2px solid blue; | 16 border: 2px solid blue; |
| 17 -webkit-perspective: 500; | 17 -webkit-perspective: 500; |
| 18 } | 18 } |
| 19 | 19 |
| 20 #parent { | 20 #parent { |
| 21 margin: 10px; | 21 margin: 10px; |
| 22 width: 280px; | 22 width: 280px; |
| 23 height: 280px; | 23 height: 280px; |
| 24 background-color: yellow; | 24 background-color: yellow; |
| 25 opacity: 0.8; | |
| 26 -webkit-transform-style: preserve-3d; | 25 -webkit-transform-style: preserve-3d; |
| 27 transform: rotateX(-60deg) rotateY(40deg); | 26 transform: rotateX(-60deg) rotateY(40deg); |
| 28 } | 27 } |
| 29 | 28 |
| 30 #parent > div { | 29 #parent > div { |
| 31 position: absolute; | 30 position: absolute; |
| 32 top: 40px; | 31 top: 40px; |
| 33 left: 40px; | 32 left: 40px; |
| 34 width: 200px; | 33 width: 200px; |
| 35 height: 200px; | 34 height: 200px; |
| (...skipping 39 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 75 <p>The green box appear angled out from the yellow box and embedded in it.</p> | 74 <p>The green box appear angled out from the yellow box and embedded in it.</p> |
| 76 <div id="container"> | 75 <div id="container"> |
| 77 <div id="parent"> | 76 <div id="parent"> |
| 78 <div>transform: translateZ(-100px) rotateY(45deg);</div> | 77 <div>transform: translateZ(-100px) rotateY(45deg);</div> |
| 79 </div> | 78 </div> |
| 80 <div id="layerTree"></div> | 79 <div id="layerTree"></div> |
| 81 </div> | 80 </div> |
| 82 | 81 |
| 83 </body> | 82 </body> |
| 84 </html> | 83 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2065233002:
Force flattening for elements with non-initial value of opacity (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master