Geek Answers Handbook

Reverse visibility Does not work for children

These solutions ( Webkit backlink visibility not working ) did not work, since I would like to have other converted objects inside the container that should show the back side.

.container { position: relative; transform-origin: 50% 50% 0; transition: transform 1s ease 0s; width: -moz-min-content; width: -webkit-min-content; } .container img { backface-visibility: hidden; } input:checked + .container { transform: rotateY(180deg); } 
 <input type="checkbox" name="" id="" /> <div class="container"> <img src="http://todofondosdeamor.com/wp-content/uploads/images/48/gatitos-1__400x300.jpg" alt="" /> </div>

The reverse side of this cat should not be visible. Any solution to this problem?

+5
source share
2 answers

I finally found out how to solve this! The problem was that 3d did not affect the image. Just adding property: transform-style: preserve-3d; Includes an image as part of the 3D world. Previously, the backface property did not work, because it really was not 3d! It was like a texture painted on the parent surface. Now it is a three-dimensional entity with all its components and can be converted to 3d without smoothing to the surface of the parent.

 .container { position: relative; transform-origin: 50% 50% 0; transition: transform 1s ease 0s; width: -moz-min-content; width: -webkit-min-content; transform-style: preserve-3d; } .container img { backface-visibility: hidden; } input:checked + .container { transform: rotateY(180deg); } 
 <input type="checkbox" name="" id="" /> <div class="container"> <img src="http://todofondosdeamor.com/wp-content/uploads/images/48/gatitos-1__400x300.jpg" alt="" /> </div>
+11
source

backface-visibility: hidden; setting backface-visibility: hidden; on the element you transform solves the problem

 .container { position: relative; transform-origin: 50% 50% 0; transition: transform 1s ease 0s; width: -moz-min-content; width: -webkit-min-content; } .container{ backface-visibility: hidden; } input:checked + .container { transform: rotateY(180deg); } 
 <input type="checkbox" name="" id="" /> <div class="container"> <img src="http://todofondosdeamor.com/wp-content/uploads/images/48/gatitos-1__400x300.jpg" alt="" /> </div>
+1
source

More articles:


All Articles