mozilla

Compare Revisions

perspective

Change Revisions

Revision 361435:

Revision 361435 by teoli on

Revision 363643:

Revision 363643 by oncletom on

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

Revision 361435
Revision 363643
n81                <div class="cube" style="width:100%;height:100%;-n81                <div class="cube" style="width:100%;height:100%;-
>moz-perspective:250px;-moz-transform-style:preserve-3d;-moz-persp>moz-perspective:250px;-moz-transform-style:preserve-3d;-moz-persp
>ective-origin:150% 150%;">>ective-origin:150% 150%;-webkit-perspective:250px; -webkit-transf
 >orm-style:preserve-3d;-webkit-perspective-origin:150% 150%;perspe
 >ctive:250px; transform-style:preserve-3d;perspective-origin:150% 
 >150%">
n85                  <div class="front" style="display: block;positin85                  <div class="front" style="display: block;positi
>on: absolute;width: 100px;height: 100px;border: none;line-height:>on: absolute;width: 100px;height: 100px;border: none;line-height:
> 100px;font-family: arial, sans-serif;font-size: 60px;color: whit> 100px;font-family: arial, sans-serif;font-size: 60px;color: whit
>e;text-align: center;background: rgba( 0, 0, 0, 0.3 );-moz-transf>e;text-align: center;background: rgba( 0, 0, 0, 0.3 );-moz-transf
>orm: translateZ( 50px );">>orm: translateZ( 50px ); -webkit-transform: translateZ( 50px ); t
 >ransform: translateZ( 50px )">
n88                  <div class="back" style="display: block;position88                  <div class="back" style="display: block;positio
>n: absolute;width: 100px;height: 100px;border: none;line-height: >n: absolute;width: 100px;height: 100px;border: none;line-height: 
>100px;font-family: arial, sans-serif;font-size: 60px;color: white>100px;font-family: arial, sans-serif;font-size: 60px;color: white
>;text-align: center;background: rgba( 0, 255, 0, 1 ); color: blac>;text-align: center;background: rgba( 0, 255, 0, 1 ); color: blac
>k;-moz-transform: translateZ( -50px );">>k;-moz-transform: translateZ( -50px ); -webkit-transform: transla
 >teZ( -50px ); transform: translateZ( -50px );">
n91                  <div class="right" style="display: block;positin91                  <div class="right" style="display: block;positi
>on: absolute;width: 100px;height: 100px;border: none;line-height:>on: absolute;width: 100px;height: 100px;border: none;line-height:
> 100px;font-family: arial, sans-serif;font-size: 60px;color: whit> 100px;font-family: arial, sans-serif;font-size: 60px;color: whit
>e;text-align: center;background: rgba( 196, 0, 0, 0.7 );-moz-tran>e;text-align: center;background: rgba( 196, 0, 0, 0.7 );-moz-tran
>sform: rotateY( 90deg) translateZ( 50px );">>sform: rotateY( 90deg) translateZ( 50px );-webkit-transform: rota
 >teY( 90deg) translateZ( 50px );transform: rotateY( 90deg) transla
 >teZ( 50px );">
n94                  <div class="left" style="display: block;position94                  <div class="left" style="display: block;positio
>n: absolute;width: 100px;height: 100px;border: none;line-height: >n: absolute;width: 100px;height: 100px;border: none;line-height: 
>100px;font-family: arial, sans-serif;font-size: 60px;color: white>100px;font-family: arial, sans-serif;font-size: 60px;color: white
>;text-align: center;background: rgba( 0, 0, 196, 0.7 );-moz-trans>;text-align: center;background: rgba( 0, 0, 196, 0.7 );-moz-trans
>form: rotateY(-90deg) translateZ( 50px );">>form: rotateY(-90deg) translateZ( 50px );-webkit-transform: rotat
 >eY(-90deg) translateZ( 50px );transform: rotateY(-90deg) translat
 >eZ( 50px );">
n97                  <div class="top" style="display: block;positionn97                  <div class="top" style="display: block;position
>: absolute;width: 100px;height: 100px;border: none;line-height: 1>: absolute;width: 100px;height: 100px;border: none;line-height: 1
>00px;font-family: arial, sans-serif;font-size: 60px;color: white;>00px;font-family: arial, sans-serif;font-size: 60px;color: white;
>text-align: center;background: rgba( 196, 196, 0, 0.7 );-moz-tran>text-align: center;background: rgba( 196, 196, 0, 0.7 );-moz-tran
>sform: rotateX( 90deg) translateZ( 50px );">>sform: rotateX( 90deg) translateZ( 50px );-webkit-transform: rota
 >teX( 90deg) translateZ( 50px );transform: rotateX( 90deg) transla
 >teZ( 50px );">
n100                  <div class="bottom" style="display: block;positn100                  <div class="bottom" style="display: block;posit
>ion: absolute;width: 100px;height: 100px;border: none;line-height>ion: absolute;width: 100px;height: 100px;border: none;line-height
>: 100px;font-family: arial, sans-serif;font-size: 60px;color: whi>: 100px;font-family: arial, sans-serif;font-size: 60px;color: whi
>te;text-align: center;background: rgba( 196, 0, 196, 0.7);-moz-tr>te;text-align: center;background: rgba( 196, 0, 196, 0.7);-moz-tr
>ansform: rotateX(-90deg) translateZ( 50px );">>ansform: rotateX(-90deg) translateZ( 50px );-webkit-transform: ro
 >tateX(-90deg) translateZ( 50px );transform: rotateX(-90deg) trans
 >lateZ( 50px );">
n108                <div class="cube" style="width:100%;height:100%;-n108                <div class="cube" style="width:100%;height:100%;-
>moz-perspective:350px;-moz-transform-style:preserve-3d;-moz-persp>moz-perspective:350px;-moz-transform-style:preserve-3d;-moz-persp
>ective-origin:150% 150%;">>ective-origin:150% 150%;-webkit-perspective:350px; -webkit-transf
 >orm-style:preserve-3d;-webkit-perspective-origin:150% 150%;perspe
 >ctive:350px; transform-style:preserve-3d;perspective-origin:150% 
 >150%">
n112                  <div class="front" style="display: block;positin112                  <div class="front" style="display: block;positi
>on: absolute;width: 100px;height: 100px;border: none;line-height:>on: absolute;width: 100px;height: 100px;border: none;line-height:
> 100px;font-family: arial, sans-serif;font-size: 60px;color: whit> 100px;font-family: arial, sans-serif;font-size: 60px;color: whit
>e;text-align: center;background: rgba( 0, 0, 0, 0.3 );-moz-transf>e;text-align: center;background: rgba( 0, 0, 0, 0.3 );-moz-transf
>orm: translateZ( 50px );">>orm: translateZ( 50px );-webkit-transform: translateZ( 50px );tra
 >nsform: translateZ( 50px );">
n115                  <div class="back" style="display: block;position115                  <div class="back" style="display: block;positio
>n: absolute;width: 100px;height: 100px;border: none;line-height: >n: absolute;width: 100px;height: 100px;border: none;line-height: 
>100px;font-family: arial, sans-serif;font-size: 60px;color: white>100px;font-family: arial, sans-serif;font-size: 60px;color: white
>;text-align: center;background: rgba( 0, 255, 0, 1 ); color: blac>;text-align: center;background: rgba( 0, 255, 0, 1 ); color: blac
>k;-moz-transform: translateZ( -50px );">>k;-moz-transform: translateZ( -50px );-webkit-transform: translat
 >eZ( -50px );transform: translateZ( -50px );">
n118                  <div class="right" style="display: block;positin118                  <div class="right" style="display: block;positi
>on: absolute;width: 100px;height: 100px;border: none;line-height:>on: absolute;width: 100px;height: 100px;border: none;line-height:
> 100px;font-family: arial, sans-serif;font-size: 60px;color: whit> 100px;font-family: arial, sans-serif;font-size: 60px;color: whit
>e;text-align: center;background: rgba( 196, 0, 0, 0.7 );-moz-tran>e;text-align: center;background: rgba( 196, 0, 0, 0.7 );-moz-tran
>sform: rotateY( 90deg) translateZ( 50px );">>sform: rotateY( 90deg) translateZ( 50px );-webkit-transform: rota
 >teY( 90deg) translateZ( 50px );transform: rotateY( 90deg) transla
 >teZ( 50px );">
n121                  <div class="left" style="display: block;position121                  <div class="left" style="display: block;positio
>n: absolute;width: 100px;height: 100px;border: none;line-height: >n: absolute;width: 100px;height: 100px;border: none;line-height: 
>100px;font-family: arial, sans-serif;font-size: 60px;color: white>100px;font-family: arial, sans-serif;font-size: 60px;color: white
>;text-align: center;background: rgba( 0, 0, 196, 0.7 );-moz-trans>;text-align: center;background: rgba( 0, 0, 196, 0.7 );-moz-trans
>form: rotateY(-90deg) translateZ( 50px );">>form: rotateY(-90deg) translateZ( 50px );-webkit-transform: rotat
 >eY(-90deg) translateZ( 50px );transform: rotateY(-90deg) translat
 >eZ( 50px );">
n124                  <div class="top" style="display: block;positionn124                  <div class="top" style="display: block;position
>: absolute;width: 100px;height: 100px;border: none;line-height: 1>: absolute;width: 100px;height: 100px;border: none;line-height: 1
>00px;font-family: arial, sans-serif;font-size: 60px;color: white;>00px;font-family: arial, sans-serif;font-size: 60px;color: white;
>text-align: center;background: rgba( 196, 196, 0, 0.7 );-moz-tran>text-align: center;background: rgba( 196, 196, 0, 0.7 );-moz-tran
>sform: rotateX( 90deg) translateZ( 50px );">>sform: rotateX( 90deg) translateZ( 50px );-webkit-transform: rota
 >teX( 90deg) translateZ( 50px );transform: rotateX( 90deg) transla
 >teZ( 50px );">
n127                  <div class="bottom" style="display: block;positn127                  <div class="bottom" style="display: block;posit
>ion: absolute;width: 100px;height: 100px;border: none;line-height>ion: absolute;width: 100px;height: 100px;border: none;line-height
>: 100px;font-family: arial, sans-serif;font-size: 60px;color: whi>: 100px;font-family: arial, sans-serif;font-size: 60px;color: whi
>te;text-align: center;background: rgba( 196, 0, 196, 0.7);-moz-tr>te;text-align: center;background: rgba( 196, 0, 196, 0.7);-moz-tr
>ansform: rotateX(-90deg) translateZ( 50px );">>ansform: rotateX(-90deg) translateZ( 50px );-webkit-transform: ro
 >tateX(-90deg) translateZ( 50px );transform: rotateX(-90deg) trans
 >lateZ( 50px );">
n135                <div class="cube" style="width:100%;height:100%;-n135                <div class="cube" style="width:100%;height:100%;-
>moz-perspective:500px;-moz-transform-style:preserve-3d;-moz-persp>moz-perspective:500px;-moz-transform-style:preserve-3d;-moz-persp
>ective-origin:150% 150%;">>ective-origin:150% 150%;-webkit-perspective:500px; -webkit-transf
 >orm-style:preserve-3d;-webkit-perspective-origin:150% 150%;perspe
 >ctive:500px; transform-style:preserve-3d;perspective-origin:150% 
 >150%">
n139                  <div class="front" style="display: block;positin139                  <div class="front" style="display: block;positi
>on: absolute;width: 100px;height: 100px;border: none;line-height:>on: absolute;width: 100px;height: 100px;border: none;line-height:
> 100px;font-family: arial, sans-serif;font-size: 60px;color: whit> 100px;font-family: arial, sans-serif;font-size: 60px;color: whit
>e;text-align: center;background: rgba( 0, 0, 0, 0.3 );-moz-transf>e;text-align: center;background: rgba( 0, 0, 0, 0.3 );-moz-transf
>orm: translateZ( 50px );">>orm: translateZ( 50px );-webkit-transform: translateZ( 50px );tra
 >nsform: translateZ( 50px );">
n142                  <div class="back" style="display: block;position142                  <div class="back" style="display: block;positio
>n: absolute;width: 100px;height: 100px;border: none;line-height: >n: absolute;width: 100px;height: 100px;border: none;line-height: 
>100px;font-family: arial, sans-serif;font-size: 60px;color: white>100px;font-family: arial, sans-serif;font-size: 60px;color: white
>;text-align: center;background: rgba( 0, 255, 0, 1 ); color: blac>;text-align: center;background: rgba( 0, 255, 0, 1 ); color: blac
>k;-moz-transform: translateZ( -50px );">>k;-moz-transform: translateZ( -50px );-webkit-transform: translat
 >eZ( -50px );transform: translateZ( -50px );">
n145                  <div class="right" style="display: block;positin145                  <div class="right" style="display: block;positi
>on: absolute;width: 100px;height: 100px;border: none;line-height:>on: absolute;width: 100px;height: 100px;border: none;line-height:
> 100px;font-family: arial, sans-serif;font-size: 60px;color: whit> 100px;font-family: arial, sans-serif;font-size: 60px;color: whit
>e;text-align: center;background: rgba( 196, 0, 0, 0.7 );-moz-tran>e;text-align: center;background: rgba( 196, 0, 0, 0.7 );-moz-tran
>sform: rotateY( 90deg) translateZ( 50px );">>sform: rotateY( 90deg) translateZ( 50px );-webkit-transform: rota
 >teY( 90deg) translateZ( 50px );transform: rotateY( 90deg) transla
 >teZ( 50px );">
n148                  <div class="left" style="display: block;position148                  <div class="left" style="display: block;positio
>n: absolute;width: 100px;height: 100px;border: none;line-height: >n: absolute;width: 100px;height: 100px;border: none;line-height: 
>100px;font-family: arial, sans-serif;font-size: 60px;color: white>100px;font-family: arial, sans-serif;font-size: 60px;color: white
>;text-align: center;background: rgba( 0, 0, 196, 0.7 );-moz-trans>;text-align: center;background: rgba( 0, 0, 196, 0.7 );-moz-trans
>form: rotateY(-90deg) translateZ( 50px );">>form: rotateY(-90deg) translateZ( 50px );-webkit-transform: rotat
 >eY(-90deg) translateZ( 50px );transform: rotateY(-90deg) translat
 >eZ( 50px );">
n151                  <div class="top" style="display: block;positionn151                  <div class="top" style="display: block;position
>: absolute;width: 100px;height: 100px;border: none;line-height: 1>: absolute;width: 100px;height: 100px;border: none;line-height: 1
>00px;font-family: arial, sans-serif;font-size: 60px;color: white;>00px;font-family: arial, sans-serif;font-size: 60px;color: white;
>text-align: center;background: rgba( 196, 196, 0, 0.7 );-moz-tran>text-align: center;background: rgba( 196, 196, 0, 0.7 );-moz-tran
>sform: rotateX( 90deg) translateZ( 50px );">>sform: rotateX( 90deg) translateZ( 50px );-webkit-transform: rota
 >teX( 90deg) translateZ( 50px );transform: rotateX( 90deg) transla
 >teZ( 50px );">
t154                  <div class="bottom" style="display: block;positt154                  <div class="bottom" style="display: block;posit
>ion: absolute;width: 100px;height: 100px;border: none;line-height>ion: absolute;width: 100px;height: 100px;border: none;line-height
>: 100px;font-family: arial, sans-serif;font-size: 60px;color: whi>: 100px;font-family: arial, sans-serif;font-size: 60px;color: whi
>te;text-align: center;background: rgba( 196, 0, 196, 0.7);-moz-tr>te;text-align: center;background: rgba( 196, 0, 196, 0.7);-moz-tr
>ansform: rotateX(-90deg) translateZ( 50px );">>ansform: rotateX(-90deg) translateZ( 50px );-webkit-transform: ro
 >tateX(-90deg) translateZ( 50px );transform: rotateX(-90deg) trans
 >lateZ( 50px );">

Back to History