307 lines
8.5 KiB
CSS
307 lines
8.5 KiB
CSS
.animation {
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
|
|
@charset "UTF-8";
|
|
|
|
@-webkit-keyframes rotateCube {
|
|
0% {
|
|
transform: translateZ(-200px) rotateY(0deg) rotateX(0deg);
|
|
}
|
|
5.55% {
|
|
transform: translateZ(-200px) rotateY(0deg) rotateX(0deg);
|
|
}
|
|
11.1% {
|
|
transform: translateZ(-200px) rotateY(0deg) rotateX(90deg);
|
|
}
|
|
16.55% {
|
|
transform: translateZ(-200px) rotateY(0deg) rotateX(90deg);
|
|
}
|
|
22.22% {
|
|
transform: translateZ(-200px) rotateY(90deg) rotateX(90deg);
|
|
}
|
|
27.75% {
|
|
transform: translateZ(-200px) rotateY(90deg) rotateX(90deg);
|
|
}
|
|
33.3% {
|
|
transform: translateZ(-200px) rotateY(180deg) rotateX(90deg);
|
|
}
|
|
38.85% {
|
|
transform: translateZ(-200px) rotateY(180deg) rotateX(90deg);
|
|
}
|
|
44.4% {
|
|
transform: translateZ(-200px) rotateY(270deg) rotateX(90deg);
|
|
}
|
|
49.95% {
|
|
transform: translateZ(-200px) rotateY(270deg) rotateX(90deg);
|
|
}
|
|
55.5% {
|
|
transform: translateZ(-200px) rotateY(360deg) rotateX(90deg);
|
|
}
|
|
61.05% {
|
|
transform: translateZ(-200px) rotateY(360deg) rotateX(90deg);
|
|
}
|
|
61.055% {
|
|
transform: translateZ(-200px) rotateY(0deg) rotateX(90deg);
|
|
}
|
|
66.6% {
|
|
transform: translateZ(-200px) rotateY(0deg) rotateX(180deg);
|
|
}
|
|
72.15% {
|
|
transform: translateZ(-200px) rotateY(0deg) rotateX(180deg);
|
|
}
|
|
77.7% {
|
|
transform: translateZ(-200px) rotateY(0deg) rotateX(270deg);
|
|
}
|
|
83.25% {
|
|
transform: translateZ(-200px) rotateY(0deg) rotateX(270deg);
|
|
}
|
|
88.8% {
|
|
transform: translateZ(-200px) rotateY(0deg) rotateX(360deg);
|
|
}
|
|
94.35% {
|
|
transform: translateZ(-200px) rotateY(0deg) rotateX(360deg);
|
|
}
|
|
94.355% {
|
|
transform: translateZ(-200px) rotateY(0deg) rotateX(0deg);
|
|
}
|
|
99.9% {
|
|
transform: translateZ(-200px) rotateY(0deg) rotateX(0deg);
|
|
}
|
|
}
|
|
@keyframes rotateCube {
|
|
0% {
|
|
transform: translateZ(-200px) rotateY(0deg) rotateX(0deg);
|
|
}
|
|
5.55% {
|
|
transform: translateZ(-200px) rotateY(0deg) rotateX(0deg);
|
|
}
|
|
11.1% {
|
|
transform: translateZ(-200px) rotateY(0deg) rotateX(90deg);
|
|
}
|
|
16.55% {
|
|
transform: translateZ(-200px) rotateY(0deg) rotateX(90deg);
|
|
}
|
|
22.22% {
|
|
transform: translateZ(-200px) rotateY(90deg) rotateX(90deg);
|
|
}
|
|
27.75% {
|
|
transform: translateZ(-200px) rotateY(90deg) rotateX(90deg);
|
|
}
|
|
33.3% {
|
|
transform: translateZ(-200px) rotateY(180deg) rotateX(90deg);
|
|
}
|
|
38.85% {
|
|
transform: translateZ(-200px) rotateY(180deg) rotateX(90deg);
|
|
}
|
|
44.4% {
|
|
transform: translateZ(-200px) rotateY(270deg) rotateX(90deg);
|
|
}
|
|
49.95% {
|
|
transform: translateZ(-200px) rotateY(270deg) rotateX(90deg);
|
|
}
|
|
55.5% {
|
|
transform: translateZ(-200px) rotateY(360deg) rotateX(90deg);
|
|
}
|
|
61.05% {
|
|
transform: translateZ(-200px) rotateY(360deg) rotateX(90deg);
|
|
}
|
|
61.055% {
|
|
transform: translateZ(-200px) rotateY(0deg) rotateX(90deg);
|
|
}
|
|
66.6% {
|
|
transform: translateZ(-200px) rotateY(0deg) rotateX(180deg);
|
|
}
|
|
72.15% {
|
|
transform: translateZ(-200px) rotateY(0deg) rotateX(180deg);
|
|
}
|
|
77.7% {
|
|
transform: translateZ(-200px) rotateY(0deg) rotateX(270deg);
|
|
}
|
|
83.25% {
|
|
transform: translateZ(-200px) rotateY(0deg) rotateX(270deg);
|
|
}
|
|
88.8% {
|
|
transform: translateZ(-200px) rotateY(0deg) rotateX(360deg);
|
|
}
|
|
94.35% {
|
|
transform: translateZ(-200px) rotateY(0deg) rotateX(360deg);
|
|
}
|
|
94.355% {
|
|
transform: translateZ(-200px) rotateY(0deg) rotateX(0deg);
|
|
}
|
|
99.9% {
|
|
transform: translateZ(-200px) rotateY(0deg) rotateX(0deg);
|
|
}
|
|
}
|
|
@font-face {
|
|
font-family: minecrafft;
|
|
src: url(https://assets.codepen.io/751678/MinecraftFont.ttf);
|
|
}
|
|
|
|
.animation section {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.animation .container {
|
|
width: 200px;
|
|
height: 200px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: auto;
|
|
perspective: 600px;
|
|
margin: 0;
|
|
}
|
|
|
|
.animation .container h1 {
|
|
position: absolute;
|
|
width: 200%;
|
|
bottom: 0;
|
|
left: 100%;
|
|
right: auto;
|
|
transform: translateX(25px) translatey(0px);
|
|
transform-origin: bottom left;
|
|
margin: 0;
|
|
color: #dddddd;
|
|
font-size: 16px;
|
|
}
|
|
@media all and (min-width: 768px) {
|
|
.animation .container h1 {
|
|
width: 300%;
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
.animation .container #cube {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
transform-style: preserve-3d;
|
|
transform: translateZ(-200px) rotateY(0deg) rotateX(0deg);
|
|
-webkit-transform: translateZ(-200px) rotateY(0deg) rotateX(0deg);
|
|
-moz-transform: translateZ(-200px) rotateY(0deg) rotateX(0deg);
|
|
-ms-trasform: translateZ(-200px) rotateY(0deg) rotateX(0deg);
|
|
transition: transform 1s;
|
|
-webkit-transition: transform 1s;
|
|
-moz-transition: transform 1s;
|
|
-ms-transition: transform 1s;
|
|
}
|
|
.animation .container #cube.animate {
|
|
-webkit-animation: rotateCube 8s linear 0s infinite forwards;
|
|
animation: rotateCube 8s linear 0s infinite forwards;
|
|
}
|
|
.animation .container #cube.hover {
|
|
-webkit-animation: rotateCube 6s linear 0s infinite forwards;
|
|
animation: rotateCube 6s linear 0s infinite forwards;
|
|
}
|
|
.animation .container #cube.hover figure.front {
|
|
transform: rotateY(0deg) translateZ(75px);
|
|
-webkit-transform: rotateY(0deg) translateZ(75px);
|
|
-moz-transform: rotateY(0deg) translateZ(75px);
|
|
-ms-trasform: rotateY(0deg) translateZ(75px);
|
|
}
|
|
.animation .container #cube.hover figure.back {
|
|
transform: rotateX(180deg) translateZ(75px);
|
|
-webkit-transform: rotateX(180deg) translateZ(75px);
|
|
-moz-transform: rotateX(180deg) translateZ(75px);
|
|
-ms-trasform: rotateX(180deg) translateZ(75px);
|
|
}
|
|
.animation .container #cube.hover figure.right {
|
|
transform: rotateY(90deg) translateZ(75px);
|
|
-webkit-transform: rotateY(90deg) translateZ(75px);
|
|
-moz-transform: rotateY(90deg) translateZ(75px);
|
|
-ms-trasform: rotateY(90deg) translateZ(75px);
|
|
}
|
|
.animation .container #cube.hover figure.left {
|
|
transform: rotateY(-90deg) translateZ(75px);
|
|
-webkit-transform: rotateY(-90deg) translateZ(75px);
|
|
-moz-transform: rotateY(-90deg) translateZ(75px);
|
|
-ms-trasform: rotateY(-90deg) translateZ(75px);
|
|
}
|
|
.animation .container #cube.hover figure.top {
|
|
transform: rotateX(90deg) translateZ(75px);
|
|
-webkit-transform: rotateX(90deg) translateZ(75px);
|
|
-moz-transform: rotateX(90deg) translateZ(75px);
|
|
-ms-trasform: rotateX(90deg) translateZ(75px);
|
|
}
|
|
.animation .container #cube.hover figure.bottom {
|
|
transform: rotateX(-90deg) translateZ(75px);
|
|
-webkit-transform: rotateX(-90deg) translateZ(75px);
|
|
-moz-transform: rotateX(-90deg) translateZ(75px);
|
|
-ms-trasform: rotateX(-90deg) translateZ(75px);
|
|
}
|
|
.animation .container #cube figure {
|
|
margin: 0;
|
|
width: 200px;
|
|
height: 200px;
|
|
display: block;
|
|
position: absolute;
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: center;
|
|
transition: transform 0.6s ease-in-out;
|
|
-webkit-transition: transform 0.6s ease-in-out;
|
|
-moz-transition: transform 0.6s ease-in-out;
|
|
-ms-transition: transform 0.6s ease-in-out;
|
|
}
|
|
.animation .container #cube figure.front {
|
|
transform: rotateY(0deg) translateZ(100px);
|
|
-webkit-transform: rotateY(0deg) translateZ(100px);
|
|
-moz-transform: rotateY(0deg) translateZ(100px);
|
|
-ms-trasform: rotateY(0deg) translateZ(100px);
|
|
}
|
|
.animation .container #cube figure.back {
|
|
transform: rotateX(180deg) translateZ(100px);
|
|
-webkit-transform: rotateX(180deg) translateZ(100px);
|
|
-moz-transform: rotateX(180deg) translateZ(100px);
|
|
-ms-trasform: rotateX(180deg) translateZ(100px);
|
|
}
|
|
.animation .container #cube figure.right {
|
|
transform: rotateY(90deg) translateZ(100px);
|
|
-webkit-transform: rotateY(90deg) translateZ(100px);
|
|
-moz-transform: rotateY(90deg) translateZ(100px);
|
|
-ms-trasform: rotateY(90deg) translateZ(100px);
|
|
}
|
|
.animation .container #cube figure.left {
|
|
transform: rotateY(-90deg) translateZ(100px);
|
|
-webkit-transform: rotateY(-90deg) translateZ(100px);
|
|
-moz-transform: rotateY(-90deg) translateZ(100px);
|
|
-ms-trasform: rotateY(-90deg) translateZ(100px);
|
|
}
|
|
.animation .container #cube figure.top {
|
|
transform: rotateX(90deg) translateZ(100px);
|
|
-webkit-transform: rotateX(90deg) translateZ(100px);
|
|
-moz-transform: rotateX(90deg) translateZ(100px);
|
|
-ms-trasform: rotateX(90deg) translateZ(100px);
|
|
}
|
|
.animation .container #cube figure.bottom {
|
|
transform: rotateX(-90deg) translateZ(100px);
|
|
-webkit-transform: rotateX(-90deg) translateZ(100px);
|
|
-moz-transform: rotateX(-90deg) translateZ(100px);
|
|
-ms-trasform: rotateX(-90deg) translateZ(100px);
|
|
}
|
|
|
|
.animation .container #cube figure.front {
|
|
background-image: url('../images/fifes/demzer.jpg');
|
|
}
|
|
.animation .container #cube figure.back {
|
|
background-image: url('../images/fifes/tantan.jpg');
|
|
}
|
|
.animation .container #cube figure.right {
|
|
background-image: url('../images/fifes/toto.jpg');
|
|
}
|
|
.animation .container #cube figure.left {
|
|
background-image: url('../images/fifes/demeyann.jpg');
|
|
}
|
|
.animation .container #cube figure.top {
|
|
background-image: url('../images/fifes/hugzer.jpg');
|
|
}
|
|
.animation .container #cube figure.bottom {
|
|
background-image: url('../images/fifes/znacks.jpg');
|
|
}
|