Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla

Compare Revisions

backface-visibility

Change Revisions

Revision 319311:

Revision 319311 by teoli on

Revision 319315:

Revision 319315 by matt_basta on

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

Revision 319311
Revision 319315
n95              <div class="cube" style="width:100%;height:100%;-mon95              <div class="cube" style="width:100%;height:100%;-mo
>z-perspective:300px;-moz-transform-style:preserve-3d;-moz-perspec>z-perspective:300px;-moz-transform-style:preserve-3d;-moz-perspec
>tive-origin:150% 150%;-moz-backface-visibility:visible;">>tive-origin:150% 150%;-moz-backface-visibility:visible;-webkit-pe
 >rspective:300px;-webkit-transform-style:preserve-3d;-webkit-persp
 >ective-origin:150% 150%;-webkit-backface-visibility:visible;">
96                <div class="front" style="display: block;position96                <div class="front" 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( 0, 0, 0, 0.3 );-moz-transfor>text-align: center;background: rgba( 0, 0, 0, 0.3 );-moz-transfor
>m: translateZ( 50px );">>m: translateZ( 50px );-moz-backface-visibility:visible;-webkit-tr
 >ansform: translateZ( 50px );-webkit-backface-visibility:visible;"
 >>
n99                <div class="back" style="display: block;position:n99                <div class="back" style="display: block;position:
> absolute;width: 100px;height: 100px;border: none;line-height: 10> absolute;width: 100px;height: 100px;border: none;line-height: 10
>0px;font-family: arial, sans-serif;font-size: 60px;color: white;t>0px;font-family: arial, sans-serif;font-size: 60px;color: white;t
>ext-align: center;background: rgba( 0, 255, 0, 1 ); color: black;>ext-align: center;background: rgba( 0, 255, 0, 1 ); color: black;
>-moz-transform: rotateY(-180deg) translateZ( 50px );">>-moz-transform: rotateY(180deg) translateZ( 50px );-moz-backface-
 >visibility:visible;-webkit-transform: rotateY(180deg) translateZ(
 > 50px );-webkit-backface-visibility:visible;">
n102                <div class="right" style="display: block;positionn102                <div class="right" 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, 0, 0, 0.7 );-moz-transf>text-align: center;background: rgba( 196, 0, 0, 0.7 );-moz-transf
>orm: rotateY( 90deg) translateZ( 50px );">>orm: rotateY( 90deg) translateZ( 50px );-moz-backface-visibility:
 >visible;-webkit-transform: rotateY( 90deg) translateZ( 50px );-we
 >bkit-backface-visibility:visible;">
n105                <div class="left" style="display: block;position:n105                <div class="left" style="display: block;position:
> absolute;width: 100px;height: 100px;border: none;line-height: 10> absolute;width: 100px;height: 100px;border: none;line-height: 10
>0px;font-family: arial, sans-serif;font-size: 60px;color: white;t>0px;font-family: arial, sans-serif;font-size: 60px;color: white;t
>ext-align: center;background: rgba( 0, 0, 196, 0.7 );-moz-transfo>ext-align: center;background: rgba( 0, 0, 196, 0.7 );-moz-transfo
>rm: rotateY(-90deg) translateZ( 50px );">>rm: rotateY(-90deg) translateZ( 50px );-moz-backface-visibility:v
 >isible;-webkit-transform: rotateY(-90deg) translateZ( 50px );-web
 >kit-backface-visibility:visible;">
n108                <div class="top" style="display: block;position: n108                <div class="top" style="display: block;position: 
>absolute;width: 100px;height: 100px;border: none;line-height: 100>absolute;width: 100px;height: 100px;border: none;line-height: 100
>px;font-family: arial, sans-serif;font-size: 60px;color: white;te>px;font-family: arial, sans-serif;font-size: 60px;color: white;te
>xt-align: center;background: rgba( 196, 196, 0, 0.7 );-moz-transf>xt-align: center;background: rgba( 196, 196, 0, 0.7 );-moz-transf
>orm: rotateX( 90deg) translateZ( 50px );">>orm: rotateX( 90deg) translateZ( 50px );-moz-backface-visibility:
 >visible;-webkit-transform: rotateX( 90deg) translateZ( 50px );-we
 >bkit-backface-visibility:visible;">
n111                <div class="bottom" style="display: block;position111                <div class="bottom" 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( 196, 0, 196, 0.7);-moz-tran>;text-align: center;background: rgba( 196, 0, 196, 0.7);-moz-tran
>sform: rotateX(-90deg) translateZ( 50px );">>sform: rotateX(-90deg) translateZ( 50px );-moz-backface-visibilit
 >y:visible;-webkit-transform: rotateX(-90deg) translateZ( 50px );-
 >webkit-backface-visibility:visible;">
n119              <div class="cube" style="width:100%;height:100%;-mon119              <div class="cube" style="width:100%;height:100%;-mo
>z-perspective:300px;-moz-transform-style:preserve-3d;-moz-perspec>z-perspective:300px;-moz-transform-style:preserve-3d;-moz-perspec
>tive-origin:150% 150%;">>tive-origin:150% 150%;-webkit-perspective:300px;-webkit-transform
 >-style:preserve-3d;-webkit-perspective-origin:150% 150%;">
120                <div class="front" style="display: block;position120                <div class="front" 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( 0, 0, 0, 0.3 );-moz-transfor>text-align: center;background: rgba( 0, 0, 0, 0.3 );-moz-transfor
>m: translateZ( 50px );-moz-backface-visibility:hidden;">>m: translateZ( 50px );-moz-backface-visibility:hidden;-webkit-tra
 >nsform: translateZ( 50px );-webkit-backface-visibility:hidden;">
n123                <div class="back" style="display: block;position:n123                <div class="back" style="display: block;position:
> absolute;width: 100px;height: 100px;border: none;line-height: 10> absolute;width: 100px;height: 100px;border: none;line-height: 10
>0px;font-family: arial, sans-serif;font-size: 60px;color: white;t>0px;font-family: arial, sans-serif;font-size: 60px;color: white;t
>ext-align: center;background: rgba( 0, 255, 0, 1 ); color: black;>ext-align: center;background: rgba( 0, 255, 0, 1 ); color: black;
>-moz-transform: rotateY(180deg) translateZ( -50px );-moz-backface>-moz-transform: rotateY(180deg) translateZ( 50px );-moz-backface-
>-visibility:hidden;">>visibility:hidden;-webkit-transform: rotateY(180deg) translateZ( 
 >50px );-webkit-backface-visibility:hidden;">
n126                <div class="right" style="display: block;positionn126                <div class="right" 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, 0, 0, 0.7 );-moz-transf>text-align: center;background: rgba( 196, 0, 0, 0.7 );-moz-transf
>orm: rotateY( 90deg) translateZ( 50px );-moz-backface-visibility:>orm: rotateY( 90deg) translateZ( 50px );-moz-backface-visibility:
>hidden;">>hidden;-webkit-transform: rotateY( 90deg) translateZ( 50px );-web
 >kit-backface-visibility:hidden;">
n129                <div class="left" style="display: block;position:n129                <div class="left" style="display: block;position:
> absolute;width: 100px;height: 100px;border: none;line-height: 10> absolute;width: 100px;height: 100px;border: none;line-height: 10
>0px;font-family: arial, sans-serif;font-size: 60px;color: white;t>0px;font-family: arial, sans-serif;font-size: 60px;color: white;t
>ext-align: center;background: rgba( 0, 0, 196, 0.7 );-moz-transfo>ext-align: center;background: rgba( 0, 0, 196, 0.7 );-moz-transfo
>rm: rotateY(-90deg) translateZ( 50px );-moz-backface-visibility:h>rm: rotateY(-90deg) translateZ( 50px );-moz-backface-visibility:h
>idden;">>idden;-webkit-transform: rotateY(-90deg) translateZ( 50px );-webk
 >it-backface-visibility:hidden;">
n132                <div class="top" style="display: block;position: n132                <div class="top" style="display: block;position: 
>absolute;width: 100px;height: 100px;border: none;line-height: 100>absolute;width: 100px;height: 100px;border: none;line-height: 100
>px;font-family: arial, sans-serif;font-size: 60px;color: white;te>px;font-family: arial, sans-serif;font-size: 60px;color: white;te
>xt-align: center;background: rgba( 196, 196, 0, 0.7 );-moz-transf>xt-align: center;background: rgba( 196, 196, 0, 0.7 );-moz-transf
>orm: rotateX( 90deg) translateZ( 50px );-moz-backface-visibility:>orm: rotateX( 90deg) translateZ( 50px );-moz-backface-visibility:
>hidden;">>hidden;-webkit-transform: rotateX( 90deg) translateZ( 50px );-web
 >kit-backface-visibility:hidden;">
t135                <div class="bottom" style="display: block;positiot135                <div class="bottom" 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( 196, 0, 196, 0.7);-moz-tran>;text-align: center;background: rgba( 196, 0, 196, 0.7);-moz-tran
>sform: rotateX(-90deg) translateZ( 50px );-moz-backface-visibilit>sform: rotateX(-90deg) translateZ( 50px );-moz-backface-visibilit
>y:hidden;">>y:hidden;-webkit-transform: rotateX(-90deg) translateZ( 50px );-w
 >ebkit-backface-visibility:hidden;">

Back to History