MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla

Compare Revisions

perspective

Change Revisions

Revision 494367:

Revision 494367 by kscarfone on

Revision 563703:

Revision 563703 by J-Mackerel on

Title:
perspective
perspective
Slug:
Web/CSS/perspective
Web/CSS/perspective
Tags:
"NeedsLiveSample", "CSS", "CSS Transforms", "CSS Property", "Graphics", "Web", "Layout", "Reference"
"CSS Transforms", "CSS", "Reference", "Référence", "Graphics", "Web", "CSS Property", "Layout"
Content:

Revision 494367
Revision 563703
t64    <div>t64    <h3 name="Three_cubes">
65      <table class="standard-table">65      Three cubes
66        <tbody>66    </h3>
67          <tr>67    <h4>
68            <td>68      HTML Content
69              <code>perspective:250px;</code>69    </h4>
70            </td>70    <pre class="brush: html">
71            <td>71&lt;table&gt;
72              <code>perspective:350px;</code>72   &lt;tbody&gt;
73            </td>73      &lt;tr&gt;
74            <td>74         &lt;th&gt;&lt;code&gt;perspective: 250px;&lt;/code&gt;
75              <code>perspective:500px;</code>75         &lt;/th&gt;
76            </td>76         &lt;th&gt;&lt;code&gt;perspective: 350px;&lt;/code&gt;
77          </tr>77         &lt;/th&gt;
78          <tr>78         &lt;th&gt;&lt;code&gt;perspective: 500px;&lt;/code&gt;
79            <td>79         &lt;/th&gt;
80              <div class="container" style="width:200px;height:2080      &lt;/tr&gt;
>0px;margin:75px 0 0 75px;border:none;"> 
81                <div class="cube" style="width:100%;height:100%;-81      &lt;tr&gt;
>moz-perspective:250px;-moz-transform-style:preserve-3d;-moz-persp 
>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%"> 
82                  <div class="middle" style="display: block;posit82         &lt;td&gt;
>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;"> 
83                    &nbsp; &nbsp;83            &lt;div class="container"&gt;
84                  </div>84               &lt;div class="cube pers250"&gt;
85                  <div class="front" style="display: block;positi85                  &lt;div class="face front"&gt;1&lt;/div&gt;
>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 ); -webkit-transform: translateZ( 50px ); t 
>ransform: translateZ( 50px )"> 
86                    186                  &lt;div class="face back"&gt;2&lt;/div&gt;
87                  </div>87                  &lt;div class="face right"&gt;3&lt;/div&gt;
88                  <div class="back" style="display: block;positio88                  &lt;div class="face left"&gt;4&lt;/div&gt;
>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 ); -webkit-transform: transla 
>teZ( -50px ); transform: translateZ( -50px );"> 
89                    289                  &lt;div class="face top"&gt;5&lt;/div&gt;
90                  </div>90                  &lt;div class="face bottom"&gt;6&lt;/div&gt;
91                  <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 );-webkit-transform: rota 
>teY( 90deg) translateZ( 50px );transform: rotateY( 90deg) transla 
>teZ( 50px );"> 
92                    3
93                  </div>
94                  <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 );-webkit-transform: rotat 
>eY(-90deg) translateZ( 50px );transform: rotateY(-90deg) translat 
>eZ( 50px );"> 
95                    4
96                  </div>
97                  <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 );-webkit-transform: rota 
>teX( 90deg) translateZ( 50px );transform: rotateX( 90deg) transla 
>teZ( 50px );"> 
98                    5
99                  </div>
100                  <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 );-webkit-transform: ro 
>tateX(-90deg) translateZ( 50px );transform: rotateX(-90deg) trans 
>lateZ( 50px );"> 
101                    6
102                  </div>
103                </div>91               &lt;/div&gt;
104              </div>92            &lt;/div&gt;
105            </td>93         &lt;/td&gt;
106            <td>94         &lt;td&gt;
107              <div class="container" style="width:200px;height:2095            &lt;div class="container"&gt;
>0px;margin:75px 0 0 75px;border:none;"> 
108                <div class="cube" style="width:100%;height:100%;-96               &lt;div class="cube pers350"&gt;
>moz-perspective:350px;-moz-transform-style:preserve-3d;-moz-persp 
>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%"> 
109                  <div class="middle" style="display: block;posit97                  &lt;div class="face front"&gt;1&lt;/div&gt;
>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;"> 
110                    &nbsp; &nbsp;98                  &lt;div class="face back"&gt;2&lt;/div&gt;
111                  </div>99                  &lt;div class="face right"&gt;3&lt;/div&gt;
112                  <div class="front" style="display: block;positi100                  &lt;div class="face left"&gt;4&lt;/div&gt;
>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 );-webkit-transform: translateZ( 50px );tra 
>nsform: translateZ( 50px );"> 
113                    1101                  &lt;div class="face top"&gt;5&lt;/div&gt;
114                  </div>102                  &lt;div class="face bottom"&gt;6&lt;/div&gt;
115                  <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 );-webkit-transform: translat 
>eZ( -50px );transform: translateZ( -50px );"> 
116                    2
117                  </div>
118                  <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 );-webkit-transform: rota 
>teY( 90deg) translateZ( 50px );transform: rotateY( 90deg) transla 
>teZ( 50px );"> 
119                    3
120                  </div>
121                  <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 );-webkit-transform: rotat 
>eY(-90deg) translateZ( 50px );transform: rotateY(-90deg) translat 
>eZ( 50px );"> 
122                    4
123                  </div>
124                  <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 );-webkit-transform: rota 
>teX( 90deg) translateZ( 50px );transform: rotateX( 90deg) transla 
>teZ( 50px );"> 
125                    5
126                  </div>
127                  <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 );-webkit-transform: ro 
>tateX(-90deg) translateZ( 50px );transform: rotateX(-90deg) trans 
>lateZ( 50px );"> 
128                    6
129                  </div>
130                </div>103               &lt;/div&gt;
131              </div>104            &lt;/div&gt;
132            </td>105         &lt;/td&gt;
133            <td>106         &lt;td&gt;
134              <div class="container" style="width:200px;height:20107            &lt;div class="container"&gt;
>0px;margin:75px 0 0 75px;border:none;"> 
135                <div class="cube" style="width:100%;height:100%;-108               &lt;div class="cube pers500"&gt;
>moz-perspective:500px;-moz-transform-style:preserve-3d;-moz-persp 
>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%"> 
136                  <div class="middle" style="display: block;posit109                  &lt;div class="face front"&gt;1&lt;/div&gt;
>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;"> 
137                    &nbsp; &nbsp;110                  &lt;div class="face back"&gt;2&lt;/div&gt;
138                  </div>111                  &lt;div class="face right"&gt;3&lt;/div&gt;
139                  <div class="front" style="display: block;positi112                  &lt;div class="face left"&gt;4&lt;/div&gt;
>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 );-webkit-transform: translateZ( 50px );tra 
>nsform: translateZ( 50px );"> 
140                    1113                  &lt;div class="face top"&gt;5&lt;/div&gt;
141                  </div>114                  &lt;div class="face bottom"&gt;6&lt;/div&gt;
142                  <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 );-webkit-transform: translat 
>eZ( -50px );transform: translateZ( -50px );"> 
143                    2
144                  </div>
145                  <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 );-webkit-transform: rota 
>teY( 90deg) translateZ( 50px );transform: rotateY( 90deg) transla 
>teZ( 50px );"> 
146                    3
147                  </div>
148                  <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 );-webkit-transform: rotat 
>eY(-90deg) translateZ( 50px );transform: rotateY(-90deg) translat 
>eZ( 50px );"> 
149                    4
150                  </div>
151                  <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 );-webkit-transform: rota 
>teX( 90deg) translateZ( 50px );transform: rotateX( 90deg) transla 
>teZ( 50px );"> 
152                    5
153                  </div>
154                  <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 );-webkit-transform: ro 
>tateX(-90deg) translateZ( 50px );transform: rotateX(-90deg) trans 
>lateZ( 50px );"> 
155                    6
156                  </div>
157                </div>115               &lt;/div&gt;
158              </div>116            &lt;/div&gt;
159            </td>117         &lt;/td&gt;
160          </tr>118      &lt;/tr&gt;
161        </tbody>119   &lt;/tbody&gt;
162      </table>120&lt;/table&gt;
121</pre>
122    <h4>
123      CSS Content
124    </h4>
125    <pre class="brush: css">
126/*
127Shorthand classes for different perspective values
128*/
129.pers250 {
130    perspective: 250px;
131    -webkit-perspective: 250px;
132}
133.pers350 {
134    perspective: 350px;
135    -webkit-perspective: 350px;
136}
137.pers500 {
138    perspective: 500px;
139    -webkit-perspective: 500px;
140}
141 
142/* Define the container div, the cube div, and a generic face */
143 .container {
144   width: 200px;
145   height: 200px;
146   margin: 75px 0 0 75px;
147   border: none;
148}
149.cube {
150   width: 100%;
151   height: 100%;
152   backface-visibility: visible;
153   perspective-origin: 150% 150%;
154   transform-style: preserve-3d;
155   -webkit-backface-visibility: visible;
156   -webkit-perspective-origin: 150% 150%;
157   -webkit-transform-style: preserve-3d;
158}
159.face {
160   display: block;
161   position: absolute;
162   width: 100px;
163   height: 100px;
164   border: none;
165   line-height: 100px;
166   font-family: sans-serif;
167   font-size: 60px;
168   color: white;
169   text-align: center;
170}
171 
172/* Define each face based on direction */
173 .front {
174   background: rgba(0, 0, 0, 0.3);
175   transform: translateZ(50px);
176   -webkit-transform: translateZ(50px);
177}
178.back {
179   background: rgba(0, 255, 0, 1);
180   color: black;
181   transform: rotateY(180deg) translateZ(50px);
182   -webkit-transform: rotateY(180deg) translateZ(50px);
183}
184.right {
185   background: rgba(196, 0, 0, 0.7);
186   transform: rotateY(90deg) translateZ(50px);
187   -webkit-transform: rotateY(90deg) translateZ(50px);
188}
189.left {
190   background: rgba(0, 0, 196, 0.7);
191   transform: rotateY(-90deg) translateZ(50px);
192   -webkit-transform: rotateY(-90deg) translateZ(50px);
193}
194.top {
195   background: rgba(196, 196, 0, 0.7);
196   transform: rotateX(90deg) translateZ(50px);
197   -webkit-transform: rotateX(90deg) translateZ(50px)
198}
199.bottom {
200   background: rgba(196, 0, 196, 0.7);
201   transform: rotateX(-90deg) translateZ(50px);
202   -webkit-transform: rotateX(-90deg) translateZ(50px);
203}
204 
205/* Make the table a little nicer */
206th, p, td {
207   background-color: #EEEEEE;
208   padding: 10px;
209   font-family: sans-serif;
210   text-align: left;
211}
212</pre>
213    <h4>
214      Result
215    </h4>
216    <p>
217      {{ EmbedLiveSample('Three_cubes', 940, 460) }}
163    </div>218    </p>

Back to History