Html5 y Css3

Animación 3D con Html5 y Css3

Publicado el
mariposa
Compartir en:

Código Html

<div class="contenedor">
        <div>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>

Css

*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body{
background-color: rgb(20, 20, 46);
background-size: cover;
}
.contenedor{
position: absolute;
top: calc(50% - 150px);
left: calc(50% - 100px);
-webkit-transform: perspective(1000px) rotateY(-120deg);
transform: perspective(1000px) rotateY(-130deg);
width: 300px;
height: 300px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.contenedor div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-animation: giro 800ms linear infinite;
animation: giro 3s linear infinite;
}
.contenedor div span{
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background: -webkit-gradient(linear, left bottom, left top, from(#f1f1f1), color-stop(#bbb), to(#f1f1f1));
background: -webkit-linear-gradient(bottom, #f1f1f1, #bbb, #f1f1f1);
background: -o-linear-gradient(bottom, #f1f1f1, #bbb, #f1f1f1);
background: -webkit-gradient(linear, left bottom, left top, from(#f1f1f1), color-stop(crimson), to(blue));
background: -webkit-linear-gradient(bottom, #f1f1f1, crimson, blue);
background: -o-linear-gradient(bottom, #f1f1f1, crimson, blue);
background: linear-gradient(0deg, #f1f1f1, crimson, blue);
border-radius: 50px;
border: 2px solid red;
}
.contenedor div span:nth-child(1){
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
background-image: url(../img/2.gif);
background-size: 100% 50%;
}
.contenedor div span:nth-child(2){
-webkit-transform: rotateX(45deg);
transform: rotateX(45deg);
background-color: orangered;
background-size: 100% 50%;
}
.contenedor div span:nth-child(3){
-webkit-transform: rotateX(-45deg);
transform: rotateX(-45deg);
background-color: #4ee84e;
background-size: 100% 50%;
}
.contenedor div span:nth-child(4){
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
background-color: orangered;
background-size: 100% 50%;
}
.contenedor div span:nth-child(5){
-webkit-transform: rotateX(115deg);
transform: rotateX(115deg);
background-color: orangered;
background-size: 100% 50%;
}
.contenedor div span:nth-child(6){
-webkit-transform: rotateX(155deg);
transform: rotateX(155deg);
background-color: orangered;
background-size: 100% 50%;
}
.contenedor div span:nth-child(7){
-webkit-transform: rotateX(200deg);
transform: rotateX(200deg);
background-color: orangered;
background-size: 100% 50%;
}
.contenedor div span:nth-child(8){
-webkit-transform: rotateX(245deg);
transform: rotateX(245deg);
background-color: orangered;
background-size: 100% 50%;
}
@-webkit-keyframes giro{
0%{
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
100%{
-webkit-transform: rotateX(360deg);
transform: rotateX(360deg);
}
}
@keyframes giro{
0%{
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
100%{
-webkit-transform: rotateX(360deg);
transform: rotateX(360deg);
}
}
@keyframes giro{
0%{
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
100%{
-webkit-transform: rotateX(360deg);
transform: rotateX(360deg);
}
}

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *