How to Style The Backface of a Rotated Element

How can I style the backface of a rotated element?

If the background doesn't need to reproduce the front, it can be done with a pseudo element:

webkit demo

The CSS is:

.test { 
width: 100px;
height: 100px;
position: relative;
left: 30px;
top: 30px;
background-color: lightgreen;
transition: all 2s linear;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
}

.test:after {
content: '';
right: 0px;
bottom: 0px;
position: absolute;
top: 0px;
left: 0px;
background: linear-gradient(to right, black, transparent);
-webkit-transform: rotateY( 180deg );
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
}

.container:hover .test {
-webkit-transform: rotateY( 180deg );
}

Most of it is auxiliary stuff. The only interesting issues are setting the pseudo element rotated 180 deg (as the backface) and setting backface visibility to hidden.

I have tried to keep the original content of the div visible, and found something that I don't understand; I will post that as a question

Can't hide the back face of an element with backface-visibility: hidden

Because you have to rotate the image where you specified the backface-visibility:

.scene {  width: 200px;  height: 150px;}
.container { width: 100%; height: 100%; position: relative;}
.image,.description { position: absolute; width: 100%; height: 100%; transition: transform .4s;}
.scene:hover .container .image { transform: rotateX(180deg);}
.image { backface-visibility: hidden;}
<div class="scene">  <div class="container">    <div class="description">      Kurapica is an anime character.    </div>    <img class="image" src="https://preview.ibb.co/bO30hn/kurapika.jpg" alt="Kurapica">  </div></div>

CSS3 backface visibility on grand children of rotating element

You need to set preserve 3d for this layout to work

.rotator {
-webkit-animation: rotate 2s linear infinite;
animation: rotate 2s linear infinite;
width: 10em;
height: 10em;
transform-style: preserve-3d; /* added */
}

codepen

Strange behaviour in a transition to element backface (Chrome)

Imagine two sheets of paper with text printed on one side. You put them together with the text sides facing each other. Now rotate them: You don't see any text, do you? :)

.test:after is above .test and facing it (rotateY( 180deg )). Since the backface is hidden you don't see .test:after. When .test is rotated .test:after is rotated with it, like the two pages. So as long as the backface of .test is not hidden, you won't see .test:after.

The flickering you notice is some kind of rendering issue.

Having trouble with perspective and backface-visibility

First of all, you have a syntax error:

.layer-1, layer-2 {

should be

.layer-1, .layer-2 {

Also, for this setup to work, you need to set

.poster {
transform-style: preserve-3D;
}

because you have transforms both in the parent and the child, and you want get the backface style to the combination of both. You had already this on body, but this property doesn't inherit.

Your snippet corrected

body { transform-style:preserve-3d; transform:perspective(1500px);}@keyframes rotating {    from{        transform: rotateY(0deg);    }    to{        transform: rotateY(360deg);    }}
.poster { animation: rotating 10s linear infinite;}
.poster { width:510px; height:310px; position:absolute; top:50%; left:50%; margin: 0 0 0 -256px; border-radius:4px; box-shadow:0 45px 100px rgba(0,0,0,0.4); transform-style: preserve-3D; /* new */}
.poster .shine { position:absolute; top:0; left:0; background:-webkit-linear-gradient(0deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 60%); background:linear-gradient(135deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 60%); z-index:100;}
.layer-1, .layer-2 { position:absolute; top:0; left:0; transform: translateZ(10px); -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: .1s; transition: .1s;}.layer-1 {background-color: blue; color:white;}.layer-2 { background-color: red; transform:rotateY(180deg);}
  <div class="poster">  <div class="layer-1">FRONT<img src="images/VS.svg" alt="Front" id="FRONT"></div>  <div class="layer-2">BACK<img src="images/RS.svg" alt="Back" id="BACK"></div></div>

Rotated CSS element hidden behind another element

Yes you can do with z-index property.

First make all z-index property set to 1 of your figure class that is root element of card.

figure {
margin: 0;
z-index: 1; //z-index property
}

Then make opened div z-index property set to 2 to your root element. Like below

.card.open {
z-index: 2; //z-index property added
}

codepen: https://codepen.io/marklsanders/pen/jawqJx

180 degree rotated div is only clickable from one side

it seems that you are missing a container (in much the same way I was missing it).

see the official documentation

it's not the outer element being flipped, but a wrapper inside it. that in turn causes one of two divs to be displayed (and the transition to occur)

CSS rotated div border shows odd outline

A simple fix of this is by using backface-visibility: hidden.

When an element rotates, it seems that the rendering of transform: rotate() may cause the back face of it to be shown, as if in 3D perspective.

This possibly lead to the background-color of the back face (a mirror image the element's front face) overflowing the border edge in this case.

backface-visibility: hidden fix it by rendering the back face invisible, as shown in below example.

On side note, MDN did mention that backface-visibility has no effect on 2D transforms, which indicates that this behavior of transform: rotate() to have perspective is more accidental than expected.

Example:

body {
background-color: black;
display: flex;
gap: 100px;
}
div {
width: 50px;
height: 50px;
background-color: white;
border: 50px solid black;
transform: rotate(45deg);
}
div + div {
/* fixed here */
backface-visibility: hidden;
}
<div></div>
<div></div>


Related Topics



Leave a reply



Submit