Beispiel:CSS3 backface-visibility.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!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>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS3_backface-visibility.html&oldid=92838“