Beispiel:CSS3 transform-scale3d.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" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" >
<title>transform: scale3d()</title>
<style>
.cube-wrap {
  margin-top: 0px; 
  -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 rgba(125,125,125,0.8);
  text-align: center;
  line-height: 200px;
  font-size: 1.5em;
}

.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);
}

@keyframes skalierung {
     0% { transform: scale3d(1, 1, 1); }
    17% { transform: scale3d(1, 2, 1); }
    33% { transform: scale3d(1, 2, 2); }
    50% { transform: scale3d(2, 2, 2); }
    67% { transform: scale3d(2, 2, 1); }
    83% { transform: scale3d(2, 1, 1); }
   100% { transform: scale3d(1, 1, 1); }   	     	
}

.cube {
	animation: skalierung 5s infinite linear;
}
</style>
</head>

<body>
  <h1>Strecken und Stauchen mit <code>transform: scale3d()</code></h1>
  
    <div class="cube-wrap">
      <div class="cube">
        <div class="vorne">1</div>
        <div class="hinten">6</div>
        <div class="oben">2</div>
        <div class="unten">5</div>
        <div class="links">3</div>
        <div class="rechts">4</div>
      </div>
    </div>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS3_transform-scale3d.html&oldid=68927“