mozilla

Compare Revisions

perspective

Change Revisions

Revision 21850:

Revision 21850 by teoli on

Revision 21851:

Revision 21851 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 21850
Revision 21851
n52    <p>n52    <div>
53      The HTML of a cube:53      <code>perspective:600px;</code>
54    </p>
55    <pre class="brush: html">
56<span class="xml-punctuation">&lt;</span><span class="xml-tagname
>">div </span><span class="xml-attname">class</span><span class="x 
>ml-punctuation">=</span><span class="xml-attribute">"container"</ 
>span><span class="xml-punctuation">&gt;    </span> 
57<span class="xml-punctuation">&lt;</span><span class="xml-tagname
>">div </span><span class="xml-attname">class</span><span class="x 
>ml-punctuation">=</span><span class="xml-attribute">"cube"</span> 
><span class="xml-punctuation">&gt;</span> 
58<span class="whitespace">    </span><span class="xml-punctuation"
>>&lt;</span><span class="xml-tagname">div </span><span class="xml 
>-attname">class</span><span class="xml-punctuation">=</span><span 
> class="xml-attribute">"front"</span><span class="xml-punctuation 
>">&gt;</span><span class="xml-text">1</span><span class="xml-punc 
>tuation">&lt;/</span><span class="xml-tagname">div</span><span cl 
>ass="xml-punctuation">&gt;</span> 
59<span class="whitespace">    </span><span class="xml-punctuation"
>>&lt;</span><span class="xml-tagname">div </span><span class="xml 
>-attname">class</span><span class="xml-punctuation">=</span><span 
> class="xml-attribute">"back"</span><span class="xml-punctuation" 
>>&gt;</span><span class="xml-text">2</span><span class="xml-punct 
>uation">&lt;/</span><span class="xml-tagname">div</span><span cla 
>ss="xml-punctuation">&gt;</span> 
60<span class="whitespace">    </span><span class="xml-punctuation"
>>&lt;</span><span class="xml-tagname">div </span><span class="xml 
>-attname">class</span><span class="xml-punctuation">=</span><span 
> class="xml-attribute">"right"</span><span class="xml-punctuation 
>">&gt;</span><span class="xml-text">3</span><span class="xml-punc 
>tuation">&lt;/</span><span class="xml-tagname">div</span><span cl 
>ass="xml-punctuation">&gt;</span> 
61<span class="whitespace">    </span><span class="xml-punctuation"
>>&lt;</span><span class="xml-tagname">div </span><span class="xml 
>-attname">class</span><span class="xml-punctuation">=</span><span 
> class="xml-attribute">"left"</span><span class="xml-punctuation" 
>>&gt;</span><span class="xml-text">4</span><span class="xml-punct 
>uation">&lt;/</span><span class="xml-tagname">div</span><span cla 
>ss="xml-punctuation">&gt;</span> 
62<span class="whitespace">    </span><span class="xml-punctuation"
>>&lt;</span><span class="xml-tagname">div </span><span class="xml 
>-attname">class</span><span class="xml-punctuation">=</span><span 
> class="xml-attribute">"top"</span><span class="xml-punctuation"> 
>&gt;</span><span class="xml-text">5</span><span class="xml-punctu 
>ation">&lt;/</span><span class="xml-tagname">div</span><span clas 
>s="xml-punctuation">&gt;</span> 
63<span class="whitespace">    </span><span class="xml-punctuation"
>>&lt;</span><span class="xml-tagname">div </span><span class="xml 
>-attname">class</span><span class="xml-punctuation">=</span><span 
> class="xml-attribute">"bottom"</span><span class="xml-punctuatio 
>n">&gt;</span><span class="xml-text">6</span><span class="xml-pun 
>ctuation">&lt;/</span><span class="xml-tagname">div</span><span c 
>lass="xml-punctuation">&gt;</span> 
64<span class="xml-punctuation">&lt;/</span><span class="xml-tagnam
>e">div</span><span class="xml-punctuation">&gt;   </span> 
65</pre>
66    <div class="container" style="width:200px;height:200px;positi54      <div class="container" style="width:250px;height:300px;marg
>on:relative;margin:50px auto 40px;border:none;-moz-perspective:60>in:1.5em 100px;position:relative;border:none;-moz-perspective:600
>0px;">>px">
67      <div class="cube" style="width:100%;height:100%;position: a55        <div class="cube" style="width:100%;height:100%;position:
>bsolute;-moz-transform-style:preserve-3d;-moz-perspective:2000px;>absolute;-moz-transform-style:preserve-3d;">
>"> 
56          <div class="back" style="display: block;position: absol
 >ute;width: 200px;height: 200px;border: none;line-height: 200px;fo
 >nt-family: arial, sans-serif;font-size: 120px;color: white;text-a
 >lign: center;background: rgba( 0, 255, 0, 1 ); color: black;-moz-
 >transform: translateZ( -100px );">
57            2
58          </div>
59          <div class="right" style="display: block;position: abso
 >lute;width: 200px;height: 200px;border: none;line-height: 200px;f
 >ont-family: arial, sans-serif;font-size: 120px;color: white;text-
 >align: center;background: rgba( 196, 0, 0, 0.7 );-moz-transform: 
 >rotateY( 90deg) translateZ( 100px );">
60            3
61          </div>
68        <div class="front" style="display: block;position: absolu62          <div class="left" style="display: block;position: absol
>te;width: 200px;height: 200px;border: none;line-height: 200px;fon>ute;width: 200px;height: 200px;border: none;line-height: 200px;fo
>t-family: arial, sans-serif;font-size: 120px;color: white;text-al>nt-family: arial, sans-serif;font-size: 120px;color: white;text-a
>ign: center;background: rgba( 0, 0, 0, 0.6 );-moz-transform: tran>lign: center;background: rgba( 0, 0, 196, 0.7 );-moz-transform: r
>slateZ( 100px ); border: 1px solid;">>otateY(-90deg) translateZ( 100px ); }">
69          163            4
64          </div>
65          <div class="top" style="display: block;position: absolu
 >te;width: 200px;height: 200px;border: none;line-height: 200px;fon
 >t-family: arial, sans-serif;font-size: 120px;color: white;text-al
 >ign: center;background: rgba( 196, 196, 0, 0.7 );-moz-transform: 
 >rotateX( 90deg) translateZ( 100px );">
66            5
67          </div>
68          <div class="bottom" style="display: block;position: abs
 >olute;width: 200px;height: 200px;border: none;line-height: 200px;
 >font-family: arial, sans-serif;font-size: 120px;color: white;text
 >-align: center;background: rgba( 196, 0, 196, 0.7);-moz-transform
 >: rotateX(-90deg) translateZ( 100px );">
69            6
70          </div>
nn72      </div><code>perspective:1000px;</code>
73      <div class="container" style="width:250px;height:300px;marg
 >in:1.5em 100px;position:relative;border:none;-moz-perspective:100
 >0px">
74        <div class="cube" style="width:100%;height:100%;position:
 >absolute;-moz-transform-style:preserve-3d;">
71        <div class="back" style="display: block;position: absolut75          <div class="back" style="display: block;position: absol
>e;width: 200px;height: 200px;border: none;line-height: 200px;font>ute;width: 200px;height: 200px;border: none;line-height: 200px;fo
>-family: arial, sans-serif;font-size: 120px;color: white;text-ali>nt-family: arial, sans-serif;font-size: 120px;color: white;text-a
>gn: center;background: rgba( 0, 255, 0, 1 ); color: black;-moz-tr>lign: center;background: rgba( 0, 255, 0, 1 ); color: black;-moz-
>ansform: translateZ( -100px );">>transform: translateZ( -100px );">
72          276            2
77          </div>
78          <div class="right" style="display: block;position: abso
 >lute;width: 200px;height: 200px;border: none;line-height: 200px;f
 >ont-family: arial, sans-serif;font-size: 120px;color: white;text-
 >align: center;background: rgba( 196, 0, 0, 0.7 );-moz-transform: 
 >rotateY( 90deg) translateZ( 100px );">
79            3
80          </div>
81          <div class="left" style="display: block;position: absol
 >ute;width: 200px;height: 200px;border: none;line-height: 200px;fo
 >nt-family: arial, sans-serif;font-size: 120px;color: white;text-a
 >lign: center;background: rgba( 0, 0, 196, 0.7 );-moz-transform: r
 >otateY(-90deg) translateZ( 100px ); }">
82            4
83          </div>
84          <div class="top" style="display: block;position: absolu
 >te;width: 200px;height: 200px;border: none;line-height: 200px;fon
 >t-family: arial, sans-serif;font-size: 120px;color: white;text-al
 >ign: center;background: rgba( 196, 196, 0, 0.7 );-moz-transform: 
 >rotateX( 90deg) translateZ( 100px );">
85            5
86          </div>
87          <div class="bottom" style="display: block;position: abs
 >olute;width: 200px;height: 200px;border: none;line-height: 200px;
 >font-family: arial, sans-serif;font-size: 120px;color: white;text
 >-align: center;background: rgba( 196, 0, 196, 0.7);-moz-transform
 >: rotateX(-90deg) translateZ( 100px );">
88            6
89          </div>
nn91      </div><code>perspective:300px;</code>
92      <div class="container" style="width:250px;height:300px;marg
 >in:1.5em 100px;position:relative;border:none;-moz-perspective:300
 >px">
93        <div class="cube" style="width:100%;height:100%;position:
 >absolute;-moz-transform-style:preserve-3d;">
94          <div class="back" style="display: block;position: absol
 >ute;width: 200px;height: 200px;border: none;line-height: 200px;fo
 >nt-family: arial, sans-serif;font-size: 120px;color: white;text-a
 >lign: center;background: rgba( 0, 255, 0, 1 ); color: black;-moz-
 >transform: translateZ( -100px );">
95            2
96          </div>
74        <div class="right" style="display: block;position: absolu97          <div class="right" style="display: block;position: abso
>te;width: 200px;height: 200px;border: none;line-height: 200px;fon>lute;width: 200px;height: 200px;border: none;line-height: 200px;f
>t-family: arial, sans-serif;font-size: 120px;color: white;text-al>ont-family: arial, sans-serif;font-size: 120px;color: white;text-
>ign: center;background: rgba( 196, 0, 0, 0.7 );-moz-transform: ro>align: center;background: rgba( 196, 0, 0, 0.7 );-moz-transform: 
>tateY( 90deg) translateZ( 100px );">>rotateY( 90deg) translateZ( 100px );">
75          398            3
76        </div>99          </div>
77        <div class="left" style="display: block;position: absolut100          <div class="left" style="display: block;position: absol
>e;width: 200px;height: 200px;border: none;line-height: 200px;font>ute;width: 200px;height: 200px;border: none;line-height: 200px;fo
>-family: arial, sans-serif;font-size: 120px;color: white;text-ali>nt-family: arial, sans-serif;font-size: 120px;color: white;text-a
>gn: center;background: rgba( 0, 0, 196, 0.7 );-moz-transform: rot>lign: center;background: rgba( 0, 0, 196, 0.7 );-moz-transform: r
>ateY(-90deg) translateZ( 100px ); }">>otateY(-90deg) translateZ( 100px ); }">
78          4101            4
79        </div>102          </div>
80        <div class="top" style="display: block;position: absolute103          <div class="top" style="display: block;position: absolu
>;width: 200px;height: 200px;border: none;line-height: 200px;font->te;width: 200px;height: 200px;border: none;line-height: 200px;fon
>family: arial, sans-serif;font-size: 120px;color: white;text-alig>t-family: arial, sans-serif;font-size: 120px;color: white;text-al
>n: center;background: rgba( 196, 196, 0, 0.7 );-moz-transform: ro>ign: center;background: rgba( 196, 196, 0, 0.7 );-moz-transform: 
>tateX( 90deg) translateZ( 100px );">>rotateX( 90deg) translateZ( 100px );">
81          5104            5
82        </div>105          </div>
83        <div class="bottom" style="display: block;position: absol106          <div class="bottom" style="display: block;position: abs
>ute;width: 200px;height: 200px;border: none;line-height: 200px;fo>olute;width: 200px;height: 200px;border: none;line-height: 200px;
>nt-family: arial, sans-serif;font-size: 120px;color: white;text-a>font-family: arial, sans-serif;font-size: 120px;color: white;text
>lign: center;background: rgba( 196, 0, 196, 0.7);-moz-transform: >-align: center;background: rgba( 196, 0, 196, 0.7);-moz-transform
>rotateX(-90deg) translateZ( 100px );">>: rotateX(-90deg) translateZ( 100px );">
84          6107            6
108          </div>
t87      <p>t
88        &nbsp;
89      </p>

Back to History