Beispiel:CSS3 backface-visibility.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css"> <title>backface-visibility</title> <style> .cube-wrap {

 margin-top: 100px;	
 -webkit-perspective: 800px;
 -webkit-perspective-origin: 50% 100px;
 perspective: 800px;
 perspective-origin: 50% 100px;

}

.cube {

 position: relative;
 width: 200px;
 margin: 0 auto;
 -webkit-transform-style: preserve-3d;
 transform-style: preserve-3d;
 transform: rotateX(22deg) rotateY(-45deg) ;

}

.cube div {

 position: absolute;
 width: 200px;
 height: 200px;
 box-shadow: inset 0 0 30px rgb(125 125 125 / 0.8);
 text-align: center;
 line-height: 200px;
 font-size: 1.5em;
 backface-visibility: visible;

}

.cube:hover div {

   backface-visibility: hidden;

}

.hinten { transform: translateZ(-100px) rotateY(180deg); } .rechts { transform: rotateY(-270deg) translateX(100px); transform-origin: top right; } .links { transform: rotateY(270deg) translateX(-100px); transform-origin: center left; } .oben { transform: rotateX(90deg) translateY(-100px); transform-origin: top center; } .unten { transform: rotateX(-90deg) translateY(100px); transform-origin: bottom center; } .vorne { transform: translateZ(100px); }

</style> </head>

<body>

backface-visibility</code>

Bewegst du die Maus über den Würfel, werden die Rückseiten verdeckt.

vorne

hinten

oben

unten

links

rechts

</body> </html>