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
Using CSS Mix-Blend-Mode with a Child of a Position Fixed Element
How to Rotate a Font Icon 45 Degrees
Combining Ie6 and Ie7 CSS Hacks in Same Stylesheet
Apply CSS Properties When Transition Ends
How to Style Nested Elements in React with Styled-Components
Multi Line Dotted or Dashed Text-Underline
Make Background Image Responsive
How to Add Space After a Colon in CSS with Sublime Text 2
Block Elements Only Inside Flex Item
How to Apply Text-Align Left in The First Column and Text-Align Right in The Others
CSS Selector for Multiple Sub-Elements
Svg Letter-Spacing Also Applied to Mozilla Firefox