2,326
edits
Changes
Jump to navigation
Jump to search
no edit summary
Line 1:
Line 1:
−width: 200px;
−height: 200px;
−perspective: 600px;
−margin: 100px;
−.cube {
−width: 100%;
−height: 100%;
−position: relative;
−transform-style: preserve-3d;
−animation: rotatey 5s linear infinite;
−}
−.cube-face {
−position: absolute;
−width: 200px;
−height: 200px;
−}
−.face-front { transform: rotateY( 0deg) translateZ(100px); background-color: rgba(171, 171, 171, 0.5); }
−.face-right { transform: rotateY( 90deg) translateZ(100px); background-color: rgba(171, 171, 171, 0.5); }
−.face-back { transform: rotateY(180deg) translateZ(100px); background-color: rgba(171, 171, 171, 0.5); }
−.face-left { transform: rotateY(-90deg) translateZ(100px); background-color: rgba(171, 171, 171, 0.5); }
−.face-top { transform: rotateX( 90deg) translateZ(100px); background-color: rgba(171, 171, 171, 0.5); }
−.face-bottom { transform: rotateX(-90deg) translateZ(100px); background-color: rgba(171, 171, 171, 0.5); }
−@keyframes rotatey {
−0% { transform: rotate3d(0, 0, 1, 0deg); }
−100% { transform: rotate3d(1, 0, 1, 360deg); }
−}
−/* most of the css was taken from https://3dtransforms.desandro.com/cube */
−}}
−<div class="scene">
−<div class="cube">
−<div class="cube-face face-front">[[File:Gardener.webp|200px]]</div>
−<div class="cube-face face-back">[[File:Gardener.webp|200px]]</div>
−<div class="cube-face face-right">[[File:Gardener.webp|200px]]</div>
−<div class="cube-face face-left">[[File:Gardener.webp|200px]]</div>
−<div class="cube-face face-top">[[File:Gardener.webp|200px]]</div>
−<div class="cube-face face-bottom">[[File:Gardener.webp|200px]]</div>
−</div>
−</div>
{{#css:
+{{Cube|[[File:Gardener.webp|200px]]|[[File:Gardener.webp|200px]]|[[File:Gardener.webp|200px]]|[[File:Gardener.webp|200px]]|[[File:Gardener.webp|200px]]|[[File:Gardener.webp|200px]]||2|opacity=0}}
−.scene {
−}
−== Trivia ==
== Trivia ==