layout/reftests/transform-3d/backface-visibility-2.html@8bccb770b82d (annotated)
layout/reftests/transform-3d/backface-visibility-2.html
Wed, 31 Dec 2014 13:27:57 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 13:27:57 +0100
- branch
- TOR_BUG_3246
- changeset 6
- 8bccb770b82d
- permissions
- -rw-r--r--
Ignore runtime configuration files generated during quality assurance.
| michael@0 | 1 | <!DOCTYPE html> |
| michael@0 | 2 | <html> |
| michael@0 | 3 | <body> |
| michael@0 | 4 | <style> |
| michael@0 | 5 | #container { |
| michael@0 | 6 | position: relative; |
| michael@0 | 7 | margin: 10px auto; |
| michael@0 | 8 | width: 450px; |
| michael@0 | 9 | height: 281px; |
| michael@0 | 10 | z-index: 1; |
| michael@0 | 11 | -moz-perspective: 1000px; |
| michael@0 | 12 | } |
| michael@0 | 13 | #card { |
| michael@0 | 14 | width: 100%; |
| michael@0 | 15 | height: 100%; |
| michael@0 | 16 | -moz-transform-style: preserve-3d; |
| michael@0 | 17 | -moz-transform: rotateY(165deg); |
| michael@0 | 18 | } |
| michael@0 | 19 | .face { |
| michael@0 | 20 | position: absolute; |
| michael@0 | 21 | width: 100%; |
| michael@0 | 22 | height: 100%; |
| michael@0 | 23 | -moz-backface-visibility: hidden; |
| michael@0 | 24 | background: red; |
| michael@0 | 25 | } |
| michael@0 | 26 | .face.back { |
| michael@0 | 27 | display: block; |
| michael@0 | 28 | -moz-transform: rotateY(180deg); |
| michael@0 | 29 | box-sizing: border-box; |
| michael@0 | 30 | padding: 10px; |
| michael@0 | 31 | color: white; |
| michael@0 | 32 | text-align: center; |
| michael@0 | 33 | background: green; |
| michael@0 | 34 | } |
| michael@0 | 35 | </style> |
| michael@0 | 36 | |
| michael@0 | 37 | <div id="container" class="hover"> |
| michael@0 | 38 | <div id="card"> |
| michael@0 | 39 | <div class="front face"> |
| michael@0 | 40 | </div> |
| michael@0 | 41 | <div class="back face"> |
| michael@0 | 42 | </div> |
| michael@0 | 43 | </div> |
| michael@0 | 44 | </div> |
| michael@0 | 45 | </body></html> |
