CSS - backface-visibility
backface-visibility
determines if the back side of an element is visible or not when its flipped over, using transforms or other methods.
we can flip this demo div over to see the back with transform: scaleX(-1);
on my tests i cant get this one working correctly.
Property Variable Name
backface-visibilityAvailable Values for backface-visibility
visible|hidden|initial|inheritExamples Using backface-visibility values
Example using backface-visibility visible
Example using backface-visibility visible on dbs-2
Here is an example using backface-visibility:visible;
Demo Box 1 Content 1
Demo Box 1 Content 2
Code
<style>
.demo-box-1 {
border-radius:3px;
margin-bottom:10px;
border:1px solid #000;
height:220px;
width:100%;
display: flex;
flex-wrap: wrap;
}
.demo-box-1 .dbs {
display:inline-block;
padding:10px;
background:#3b7aa0;
color:#FFF;
margin:0 1%;
}
.demo-box-1 .dbs-1 {
transform: scaleX(1);
backface-visibility:visible;
}
.demo-box-1 .dbs-2 {
transform: scaleX(-1);
backface-visibility:visible;
}
</style>
<h2>Example using backface-visibility visible on dbs-2</h2>
<p>Here is an example using <code>backface-visibility:visible;</code></p>
<div class='demo-box-1'>
<div class='dbs dbs-1'>Demo Box 1 Content 1</div>
<div class='dbs dbs-2'>Demo Box 1 Content 2</div>
</div>Example using backface-visibility hidden
Example using backface-visibility hidden on dbs-2
Here is an example using backface-visibility:hidden;
Demo Box 2 Content 1
Demo Box 2 Content 2
Code
<style>
.demo-box-2 {
border-radius:3px;
margin-bottom:10px;
border:1px solid #000;
height:220px;
width:100%;
display: flex;
flex-wrap: wrap;
}
.demo-box-2 .dbs {
display:inline-block;
padding:10px;
background:#3b7aa0;
color:#FFF;
margin:0 1%;
}
.demo-box-2 .dbs-1 {
transform: scaleX(1);
backface-visibility:hidden;
}
.demo-box-2 .dbs-2 {
transform: scaleX(-1);
backface-visibility:hidden;
}
</style>
<h2>Example using backface-visibility hidden on dbs-2</h2>
<p>Here is an example using <code>backface-visibility:hidden;</code></p>
<div class='demo-box-2'>
<div class='dbs dbs-1'>Demo Box 2 Content 1</div>
<div class='dbs dbs-2'>Demo Box 2 Content 2</div>
</div>Example using backface-visibility initial
Example using backface-visibility initial on dbs-2
Here is an example using backface-visibility:initial;
Demo Box 3 Content 1
Demo Box 3 Content 2
Code
<style>
.demo-box-3 {
border-radius:3px;
margin-bottom:10px;
border:1px solid #000;
height:220px;
width:100%;
display: flex;
flex-wrap: wrap;
}
.demo-box-3 .dbs {
display:inline-block;
padding:10px;
background:#3b7aa0;
color:#FFF;
margin:0 1%;
}
.demo-box-3 .dbs-1 {
transform: scaleX(1);
backface-visibility:initial;
}
.demo-box-3 .dbs-2 {
transform: scaleX(-1);
backface-visibility:initial;
}
</style>
<h2>Example using backface-visibility initial on dbs-2</h2>
<p>Here is an example using <code>backface-visibility:initial;</code></p>
<div class='demo-box-3'>
<div class='dbs dbs-1'>Demo Box 3 Content 1</div>
<div class='dbs dbs-2'>Demo Box 3 Content 2</div>
</div>Example using backface-visibility inherit
Example using backface-visibility inherit on dbs-2
Here is an example using backface-visibility:inherit;
Demo Box 4 Content 1
Demo Box 4 Content 2
Code
<style>
.demo-box-4 {
border-radius:3px;
margin-bottom:10px;
border:1px solid #000;
height:220px;
width:100%;
display: flex;
flex-wrap: wrap;
}
.demo-box-4 .dbs {
display:inline-block;
padding:10px;
background:#3b7aa0;
color:#FFF;
margin:0 1%;
}
.demo-box-4 .dbs-1 {
transform: scaleX(1);
backface-visibility:inherit;
}
.demo-box-4 .dbs-2 {
transform: scaleX(-1);
backface-visibility:inherit;
}
</style>
<h2>Example using backface-visibility inherit on dbs-2</h2>
<p>Here is an example using <code>backface-visibility:inherit;</code></p>
<div class='demo-box-4'>
<div class='dbs dbs-1'>Demo Box 4 Content 1</div>
<div class='dbs dbs-2'>Demo Box 4 Content 2</div>
</div>