Beispiel:CSS3 backface-visibility.html
Aus SELFHTML-Wiki
<!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:SELFHTML-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>
<h1>backface-visibility</code></h1>
<p>Bewegen Sie die Maus über den Würfel, werden die Rückseiten verdeckt.</p>
<div class="cube-wrap">
<div class="cube">
<div class="vorne">vorne</div>
<div class="hinten">hinten</div>
<div class="oben">oben</div>
<div class="unten">unten</div>
<div class="links">links</div>
<div class="rechts">rechts</div>
</div>
</div>
</body>
</html>