mozilla

Compare Revisions

perspective

Change Revisions

Revision 21865:

Revision 21865 by teoli on

Revision 21866:

Revision 21866 by teoli on

Title:
perspective
perspective
Slug:
CSS/perspective
CSS/perspective
Tags:
css, "CSS Reference", "CSS Transforms", CSS3
css, "CSS Reference", "CSS Transforms", CSS3
Content:

Revision 21865
Revision 21866
nn60              <code>perspective:150px;</code>
61            </td>
62            <td>
nn68          </tr>
65            <td>69          <tr>
66              <code>perspective:1000px;</code>
67            </td>70            <td>
68          </tr>71              <div class="container" style="width:200px;height:20
 >0px;margin:75px 0 0 75px;border:none;">
69          <tr>72                <div class="cube" style="width:100%;height:100%;-
 >moz-perspective:150px;-moz-transform-style:preserve-3d;-moz-persp
 >ective-origin:150% 150%;">
73                  <div class="middle" style="display: block;posit
 >ion: absolute;width: 100px;height: 100px;border: 1px dashed black
 >;line-height: 100px;font-family: arial, sans-serif;font-size: 60p
 >x;color: white;text-align: center;background: transparent;">
74                    &nbsp; &nbsp;
75                  </div>
76                  <div class="front" style="display: block;positi
 >on: absolute;width: 100px;height: 100px;border: none;line-height:
 > 100px;font-family: arial, sans-serif;font-size: 60px;color: whit
 >e;text-align: center;background: rgba( 0, 0, 0, 0.3 );-moz-transf
 >orm: translateZ( 50px );">
77                    1
78                  </div>
79                  <div class="back" 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( 0, 255, 0, 1 ); color: blac
 >k;-moz-transform: translateZ( -50px );">
80                    2
81                  </div>
82                  <div class="right" style="display: block;positi
 >on: absolute;width: 100px;height: 100px;border: none;line-height:
 > 100px;font-family: arial, sans-serif;font-size: 60px;color: whit
 >e;text-align: center;background: rgba( 196, 0, 0, 0.7 );-moz-tran
 >sform: rotateY( 90deg) translateZ( 50px );">
83                    3
84                  </div>
85                  <div class="left" 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( 0, 0, 196, 0.7 );-moz-trans
 >form: rotateY(-90deg) translateZ( 50px ); }">
86                    4
87                  </div>
88                  <div class="top" 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, 196, 0, 0.7 );-moz-tran
 >sform: rotateX( 90deg) translateZ( 50px );">
89                    5
90                  </div>
91                  <div class="bottom" style="display: block;posit
 >ion: absolute;width: 100px;height: 100px;border: none;line-height
 >: 100px;font-family: arial, sans-serif;font-size: 60px;color: whi
 >te;text-align: center;background: rgba( 196, 0, 196, 0.7);-moz-tr
 >ansform: rotateX(-90deg) translateZ( 50px );">
92                    6
93                  </div>
94                </div>
95              </div>
70            <td>96            </td>
97            <td>
71              <div class="container" style="width:350px;height:3598              <div class="container" style="width:200px;height:20
>0px;margin:150px 0 0 150px;border:none;">>0px;margin:75px 0 0 75px;border:none;">
n98              <div class="container" style="width:200px;height:20n125              <div class="container" style="width:200px;height:20
>0px;margin:150px 0 0 150px;border:none;">>0px;margin:75px 0 0 75px;border:none;">
n100                  <div class="middle" style="display: block;positn127                  <div class="middle" style="display: block;posit
>ion: absolute;width: 200px;height: 200px;border: 1px dashed black>ion: absolute;width: 100px;height: 100px;border: 1px dashed black
>;line-height: 200px;font-family: arial, sans-serif;font-size: 120>;line-height: 100px;font-family: arial, sans-serif;font-size: 60p
>px;color: white;text-align: center;background: transparent;">>x;color: white;text-align: center;background: transparent;">
n103                  <div class="front" style="display: block;positin130                  <div class="front" style="display: block;positi
>on: absolute;width: 200px;height: 200px;border: none;line-height:>on: absolute;width: 100px;height: 100px;border: none;line-height:
> 200px;font-family: arial, sans-serif;font-size: 120px;color: whi> 100px;font-family: arial, sans-serif;font-size: 60px;color: whit
>te;text-align: center;background: rgba( 0, 0, 0, 0.3 );-moz-trans>e;text-align: center;background: rgba( 0, 0, 0, 0.3 );-moz-transf
>form: translateZ( 100px );">>orm: translateZ( 50px );">
n106                  <div class="back" style="display: block;position133                  <div class="back" style="display: block;positio
>n: absolute;width: 200px;height: 200px;border: none;line-height: >n: absolute;width: 100px;height: 100px;border: none;line-height: 
>200px;font-family: arial, sans-serif;font-size: 120px;color: whit>100px;font-family: arial, sans-serif;font-size: 60px;color: white
>e;text-align: center;background: rgba( 0, 255, 0, 1 ); color: bla>;text-align: center;background: rgba( 0, 255, 0, 1 ); color: blac
>ck;-moz-transform: translateZ( -100px );">>k;-moz-transform: translateZ( -50px );">
n109                  <div class="right" style="display: block;positin136                  <div class="right" style="display: block;positi
>on: absolute;width: 200px;height: 200px;border: none;line-height:>on: absolute;width: 100px;height: 100px;border: none;line-height:
> 200px;font-family: arial, sans-serif;font-size: 120px;color: whi> 100px;font-family: arial, sans-serif;font-size: 60px;color: whit
>te;text-align: center;background: rgba( 196, 0, 0, 0.7 );-moz-tra>e;text-align: center;background: rgba( 196, 0, 0, 0.7 );-moz-tran
>nsform: rotateY( 90deg) translateZ( 100px );">>sform: rotateY( 90deg) translateZ( 50px );">
n112                  <div class="left" style="display: block;position139                  <div class="left" style="display: block;positio
>n: absolute;width: 200px;height: 200px;border: none;line-height: >n: absolute;width: 100px;height: 100px;border: none;line-height: 
>200px;font-family: arial, sans-serif;font-size: 120px;color: whit>100px;font-family: arial, sans-serif;font-size: 60px;color: white
>e;text-align: center;background: rgba( 0, 0, 196, 0.7 );-moz-tran>;text-align: center;background: rgba( 0, 0, 196, 0.7 );-moz-trans
>sform: rotateY(-90deg) translateZ( 100px ); }">>form: rotateY(-90deg) translateZ( 50px ); }">
n115                  <div class="top" style="display: block;positionn142                  <div class="top" style="display: block;position
>: absolute;width: 200px;height: 200px;border: none;line-height: 2>: absolute;width: 100px;height: 100px;border: none;line-height: 1
>00px;font-family: arial, sans-serif;font-size: 120px;color: white>00px;font-family: arial, sans-serif;font-size: 60px;color: white;
>;text-align: center;background: rgba( 196, 196, 0, 0.7 );-moz-tra>text-align: center;background: rgba( 196, 196, 0, 0.7 );-moz-tran
>nsform: rotateX( 90deg) translateZ( 100px );">>sform: rotateX( 90deg) translateZ( 50px );">
t118                  <div class="bottom" style="display: block;positt145                  <div class="bottom" style="display: block;posit
>ion: absolute;width: 200px;height: 200px;border: none;line-height>ion: absolute;width: 100px;height: 100px;border: none;line-height
>: 200px;font-family: arial, sans-serif;font-size: 120px;color: wh>: 100px;font-family: arial, sans-serif;font-size: 60px;color: whi
>ite;text-align: center;background: rgba( 196, 0, 196, 0.7);-moz-t>te;text-align: center;background: rgba( 196, 0, 196, 0.7);-moz-tr
>ransform: rotateX(-90deg) translateZ( 100px );">>ansform: rotateX(-90deg) translateZ( 50px );">
119                    6
120                  </div>
121                </div>
122              </div>
123            </td>
124            <td>
125              <div class="container" style="width:200px;height:20
>0px;margin:150px 0 0 150px;border:none;"> 
126                <div class="cube" style="width:100%;height:100%;-
>moz-perspective:1000px;-moz-transform-style:preserve-3d;-moz-tran 
>sform:translateZ(-100px);-moz-perspective-origin:150% 150%;"> 
127                  <div class="middle" style="display: block;posit
>ion: absolute;width: 200px;height: 200px;border: 1px dashed black 
>;line-height: 200px;font-family: arial, sans-serif;font-size: 120 
>px;color: white;text-align: center;background: transparent;"> 
128                    &nbsp; &nbsp;
129                  </div>
130                  <div class="front" style="display: block;positi
>on: absolute;width: 200px;height: 200px;border: none;line-height: 
> 200px;font-family: arial, sans-serif;font-size: 120px;color: whi 
>te;text-align: center;background: rgba( 0, 0, 0, 0.3 );-moz-trans 
>form: translateZ( 100px );"> 
131                    1
132                  </div>
133                  <div class="back" style="display: block;positio
>n: absolute;width: 200px;height: 200px;border: none;line-height:  
>200px;font-family: arial, sans-serif;font-size: 120px;color: whit 
>e;text-align: center;background: rgba( 0, 255, 0, 1 ); color: bla 
>ck;-moz-transform: translateZ( -100px );"> 
134                    2
135                  </div>
136                  <div class="right" style="display: block;positi
>on: absolute;width: 200px;height: 200px;border: none;line-height: 
> 200px;font-family: arial, sans-serif;font-size: 120px;color: whi 
>te;text-align: center;background: rgba( 196, 0, 0, 0.7 );-moz-tra 
>nsform: rotateY( 90deg) translateZ( 100px );"> 
137                    3
138                  </div>
139                  <div class="left" style="display: block;positio
>n: absolute;width: 200px;height: 200px;border: none;line-height:  
>200px;font-family: arial, sans-serif;font-size: 120px;color: whit 
>e;text-align: center;background: rgba( 0, 0, 196, 0.7 );-moz-tran 
>sform: rotateY(-90deg) translateZ( 100px ); }"> 
140                    4
141                  </div>
142                  <div class="top" style="display: block;position
>: absolute;width: 200px;height: 200px;border: none;line-height: 2 
>00px;font-family: arial, sans-serif;font-size: 120px;color: white 
>;text-align: center;background: rgba( 196, 196, 0, 0.7 );-moz-tra 
>nsform: rotateX( 90deg) translateZ( 100px );"> 
143                    5
144                  </div>
145                  <div class="bottom" style="display: block;posit
>ion: absolute;width: 200px;height: 200px;border: none;line-height 
>: 200px;font-family: arial, sans-serif;font-size: 120px;color: wh 
>ite;text-align: center;background: rgba( 196, 0, 196, 0.7);-moz-t 
>ransform: rotateX(-90deg) translateZ( 100px );"> 

Back to History