Deslizador de cubo giratorio 3D con CSS puro/CSS3

Vista prévia

Descripción

Se trata de un deslizador de cubo giratorio 3D (volteo) construido con CSS puro y varias propiedades CSS3.

Funcionamiento

Compile la estructura de marcado para el control deslizante de cubo.

<div class="slider">

<div class="container">


<div class="slide x"></div>


<div class="slide y"></div>


<div class="slide z"></div>

</div>

<div class="shadow"></div>
</div>

Los estilos principales de CSS/CSS3 para el deslizador de cubo.

.slider {

position: absolute;

top: 0;

bottom: 0;

right: 0;

left: 0;

width: 200px;

height: 200px;

margin: auto;

-webkit-perspective: 600px;

perspective: 600px;
}

.slider * {

-webkit-transition: all 1s cubic-bezier(0.5, -0.75, 0.2, 1.5);

transition: all 1s cubic-bezier(0.5, -0.75, 0.2, 1.5);
}

.container {

width: inherit;

height: inherit;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-transform: rotateY(0deg) rotateX(0deg);

transform: rotateY(0deg) rotateX(0deg);
}

.slide, .slide:after, .slide:before {

display: block;

width: inherit;

height: inherit;

background: url('1.jpg');

position: absolute;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

background-size: cover;

background-position: center;
}

.slide.x {

-webkit-transform: rotateY(90deg);

transform: rotateY(90deg);
}

.slide.x:after {

content: '';

background-image: url('2.png');

-webkit-transform: translateZ(100px) rotateZ(-90deg);

transform: translateZ(100px) rotateZ(-90deg);
}

.slide.x:before {

content: '';

background-image: url('3.png');

-webkit-transform: translateZ(-100px) rotateZ(-90deg);

transform: translateZ(-100px) rotateZ(-90deg);
}

.slide.y {

-webkit-transform: rotateX(90deg);

transform: rotateX(90deg);
}

.slide.y:after {

content: '';

background-image: url('4.jpg');

-webkit-transform: translateZ(100px) scale(-1);

transform: translateZ(100px) scale(-1);
}

.slide.y:before {

content: '';

background-image: url('5.png');

-webkit-transform: translateZ(-100px);

transform: translateZ(-100px);
}

.slide.z {

-webkit-transform: rotateX(0);

transform: rotateX(0);
}

.slide.z:after {

content: '';

background-image: url('6.png');

-webkit-transform: translateZ(100px);

transform: translateZ(100px);
}

.slide.z:before {

content: '';

background-image: url('7.jpg');

-webkit-transform: translateZ(-100px);

transform: translateZ(-100px);
}

.container {

-webkit-animation: rotate 15s infinite cubic-bezier(1, -0.75, 0.5, 1.2);

animation: rotate 15s infinite cubic-bezier(1, -0.75, 0.5, 1.2);
}

Crea las animaciones de rotación.

@-webkit-keyframes
 rotate {
0%, 10% {
-webkit-transform: rotateY(0deg) rotateX(0deg);
transform: rotateY(0deg) rotateX(0deg);
}
 15%, 20% {
-webkit-transform: rotateY(180deg) rotateX(0deg);
transform: rotateY(180deg) rotateX(0deg);
}
 25%, 35% {
-webkit-transform: rotateY(180deg) rotateX(270deg);
transform: rotateY(180deg) rotateX(270deg);
}
 40%, 50% {
-webkit-transform: rotateY(180deg) rotateX(90deg);
transform: rotateY(180deg) rotateX(90deg);
}
 55%, 65% {
-webkit-transform: rotateY(-90deg) rotateX(90deg);
transform: rotateY(-90deg) rotateX(90deg);
}
 70%, 80% {
-webkit-transform: rotateY(90deg) rotateX(90deg);
transform: rotateY(90deg) rotateX(90deg);
}
 90%, 95% {
-webkit-transform: rotateY(0deg) rotateX(90deg);
transform: rotateY(0deg) rotateX(90deg);
}
}

@keyframes
 rotate {
0%, 10% {
-webkit-transform: rotateY(0deg) rotateX(0deg);
transform: rotateY(0deg) rotateX(0deg);
}
 15%, 20% {
-webkit-transform: rotateY(180deg) rotateX(0deg);
transform: rotateY(180deg) rotateX(0deg);
}
 25%, 35% {
-webkit-transform: rotateY(180deg) rotateX(270deg);
transform: rotateY(180deg) rotateX(270deg);
}
 40%, 50% {
-webkit-transform: rotateY(180deg) rotateX(90deg);
transform: rotateY(180deg) rotateX(90deg);
}
 55%, 65% {
-webkit-transform: rotateY(-90deg) rotateX(90deg);
transform: rotateY(-90deg) rotateX(90deg);
}
 70%, 80% {
-webkit-transform: rotateY(90deg) rotateX(90deg);
transform: rotateY(90deg) rotateX(90deg);
}
 90%, 95% {
-webkit-transform: rotateY(0deg) rotateX(90deg);
transform: rotateY(0deg) rotateX(90deg);
}
}

Estilo de la sombra del deslizador.

.shadow {

display: block;

width: 200px;

height: 200px;

background: rgba(0,0,0,0.75);

position: absolute;

top: 60%;

-webkit-transform: rotateX(90deg);

transform: rotateX(90deg);

z-index: -1;

-webkit-filter: blur(20px);

filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="20" /></filter></svg>#filter');

-webkit-filter: blur(20px);

filter: blur(20px);

left: 0;

right: 0;

margin: auto;

-webkit-animation: rotateShadow 15s infinite cubic-bezier(1, -0.75, 0.5, 1.2);

animation: rotateShadow 15s infinite cubic-bezier(1, -0.75, 0.5, 1.2);
}

@-webkit-keyframes
 rotateShadow {
0%, 10% {
-webkit-transform: rotateY(0deg) rotateX(90deg);
}
 15%, 20% {
-webkit-transform: rotateY(180deg) rotateX(90deg);;
}
 20.1%, 20.9% {
-webkit-transform: rotateY(180deg) rotateX(90deg) translatez(5px);
}
 25%, 35% {
-webkit-transform: rotateY(180deg) rotateX(90deg);
}
 35.1%, 35.9% {
-webkit-transform: rotateY(180deg) rotateX(90deg) translatez(-5px);
}
 40%, 50% {
-webkit-transform: rotateY(180deg) rotateX(90deg);
}
 55%, 65% {
-webkit-transform: rotateY(0deg) rotateX(90deg);
}
 70%, 80% {
-webkit-transform: rotateY(180deg) rotateX(90deg);
}
 90%, 99% {
-webkit-transform: rotateY(90deg) rotateX(90deg);
}
 99.1%, 99.9% {
-webkit-transform: rotateY(90deg) rotateX(90deg) translatez(-5px);
}
}