mozilla

Compare Revisions

backface-visibility

Change Revisions

Revision 21880:

Revision 21880 by teoli on

Revision 21881:

Revision 21881 by teoli on

Title:
backface-visibility
backface-visibility
Slug:
CSS/backface-visibility
CSS/backface-visibility
Tags:
css, "CSS Reference", "CSS Transforms", CSS3
css, "CSS Reference", "CSS Transforms", CSS3
Content:

Revision 21880
Revision 21881
tt56    <table class="standard-table">
57      <tbody>
58        <tr>
59          <td>
60            <code>backface-visibility: visible;</code>
61          </td>
62          <td>
63            <code>backface-visibility: hidden;</code>
64          </td>
65        </tr>
66        <tr>
67          <td>
68            <div class="container" style="width:200px;height:200p
 >x;margin:75px 0 0 75px;border:none;">
69              <div class="cube" style="width:100%;height:100%;-mo
 >z-perspective:300px;-moz-transform-style:preserve-3d;-moz-perspec
 >tive-origin:150% 150%;-moz-backface-visibility:visible;">
70                <div class="front" style="display: block;position
 >: absolute;width: 100px;height: 100px;border: none;line-height: 1
 >00px;font-family: arial, sans-serif;font-size: 60px;color: white;
 >text-align: center;background: rgba( 0, 0, 0, 0.3 );-moz-transfor
 >m: translateZ( 50px );">
71                  1
72                </div>
73                <div class="back" style="display: block;position:
 > absolute;width: 100px;height: 100px;border: none;line-height: 10
 >0px;font-family: arial, sans-serif;font-size: 60px;color: white;t
 >ext-align: center;background: rgba( 0, 255, 0, 1 ); color: black;
 >-moz-transform: rotateY(-180deg) translateZ( 50px );">
74                  2
75                </div>
76                <div class="right" style="display: block;position
 >: absolute;width: 100px;height: 100px;border: none;line-height: 1
 >00px;font-family: arial, sans-serif;font-size: 60px;color: white;
 >text-align: center;background: rgba( 196, 0, 0, 0.7 );-moz-transf
 >orm: rotateY( 90deg) translateZ( 50px );">
77                  3
78                </div>
79                <div class="left" style="display: block;position:
 > absolute;width: 100px;height: 100px;border: none;line-height: 10
 >0px;font-family: arial, sans-serif;font-size: 60px;color: white;t
 >ext-align: center;background: rgba( 0, 0, 196, 0.7 );-moz-transfo
 >rm: rotateY(-90deg) translateZ( 50px ); }">
80                  4
81                </div>
82                <div class="top" style="display: block;position: 
 >absolute;width: 100px;height: 100px;border: none;line-height: 100
 >px;font-family: arial, sans-serif;font-size: 60px;color: white;te
 >xt-align: center;background: rgba( 196, 196, 0, 0.7 );-moz-transf
 >orm: rotateX( 90deg) translateZ( 50px );">
83                  5
84                </div>
85                <div class="bottom" style="display: block;positio
 >n: absolute;width: 100px;height: 100px;border: none;line-height: 
 >100px;font-family: arial, sans-serif;font-size: 60px;color: white
 >;text-align: center;background: rgba( 196, 0, 196, 0.7);-moz-tran
 >sform: rotateX(-90deg) translateZ( 50px );">
86                  6
87                </div>
88              </div>
89            </div>
90          </td>
91          <td>
92            <div class="container" style="width:200px;height:200p
 >x;margin:75px 0 0 75px;border:none;">
93              <div class="cube" style="width:100%;height:100%;-mo
 >z-perspective:300px;-moz-transform-style:preserve-3d;-moz-perspec
 >tive-origin:150% 150%;">
94                <div class="front" style="display: block;position
 >: absolute;width: 100px;height: 100px;border: none;line-height: 1
 >00px;font-family: arial, sans-serif;font-size: 60px;color: white;
 >text-align: center;background: rgba( 0, 0, 0, 0.3 );-moz-transfor
 >m: translateZ( 50px );-moz-backface-visibility:hidden;">
95                  1
96                </div>
97                <div class="back" style="display: block;position:
 > absolute;width: 100px;height: 100px;border: none;line-height: 10
 >0px;font-family: arial, sans-serif;font-size: 60px;color: white;t
 >ext-align: center;background: rgba( 0, 255, 0, 1 ); color: black;
 >-moz-transform: rotateY(180deg) translateZ( -50px );-moz-backface
 >-visibility:hidden;">
98                  2
99                </div>
100                <div class="right" style="display: block;position
 >: absolute;width: 100px;height: 100px;border: none;line-height: 1
 >00px;font-family: arial, sans-serif;font-size: 60px;color: white;
 >text-align: center;background: rgba( 196, 0, 0, 0.7 );-moz-transf
 >orm: rotateY( 90deg) translateZ( 50px );-moz-backface-visibility:
 >hidden;">
101                  3
102                </div>
103                <div class="left" style="display: block;position:
 > absolute;width: 100px;height: 100px;border: none;line-height: 10
 >0px;font-family: arial, sans-serif;font-size: 60px;color: white;t
 >ext-align: center;background: rgba( 0, 0, 196, 0.7 );-moz-transfo
 >rm: rotateY(-90deg) translateZ( 50px );-moz-backface-visibility:h
 >idden;">
104                  4
105                </div>
106                <div class="top" style="display: block;position: 
 >absolute;width: 100px;height: 100px;border: none;line-height: 100
 >px;font-family: arial, sans-serif;font-size: 60px;color: white;te
 >xt-align: center;background: rgba( 196, 196, 0, 0.7 );-moz-transf
 >orm: rotateX( 90deg) translateZ( 50px );-moz-backface-visibility:
 >hidden;">
107                  5
108                </div>
109                <div class="bottom" style="display: block;positio
 >n: absolute;width: 100px;height: 100px;border: none;line-height: 
 >100px;font-family: arial, sans-serif;font-size: 60px;color: white
 >;text-align: center;background: rgba( 196, 0, 196, 0.7);-moz-tran
 >sform: rotateX(-90deg) translateZ( 50px );-moz-backface-visibilit
 >y:hidden;">
110                  6
111                </div>
112              </div>
113            </div>
114          </td>
115        </tr>
116      </tbody>
117    </table>

Back to History