JSFiddle - React, Tailwind, and code Playground

by Amens

HTML

<div class="contenedor"> 
			<div class="cubo">
				<div class="cara">
					<img src="http://programandoointentandolo.com/ejemplos/imagenes/cubo/img1.png" title="Soto y Caldevilla de Valdeón" alt="Soto y Caldevilla de Valdeón" height: "290px" width="290px" >
				</div>
				<div class="cara">
					<img src="http://programandoointentandolo.com/ejemplos/imagenes/cubo/img2.png" title="Un poco de nieve en agosto" alt="Un poco de nieve en agosto" width="290px" height: "290px">
				</div>
				<div class="cara">
					<img src="http://programandoointentandolo.com/ejemplos/imagenes/cubo/img3.png" title="Un rebeco" alt="Un rebeco" width="290px" height: "290px">
				</div>
				<div class="cara">
					<img src="http://programandoointentandolo.com/ejemplos/imagenes/cubo/img4.png" title="Posada de Valdeón" alt="Posada de Valdeón" width="290px" height: "290px">
				</div>
				<div class="cara">
					<img src="http://programandoointentandolo.com/ejemplos/imagenes/cubo/img5.png" title="Refugio de Pantivalles" alt="Refugio de Pantivalles" width="290px" height: "290px">
				</div>
				<div class="cara">
					<img src="http://programandoointentandolo.com/ejemplos/imagenes/cubo/img6.png" title="Unas montañas" alt="Unas montañas" width="290px" height: "290px">
				</div>
				<div class="cara-fondo"></div>
				<div class="cara-fondo"></div>
				<div class="cara-fondo"></div>
				<div class="cara-fondo"></div>
				<div class="cara-fondo"></div>
				<div class="cara-fondo"></div>
				<div class="cara-fondo"></div>
				<div class="cara-fondo"></div>
			</div>
		</div>

CSS

body{
  background: #303030;
}
.contenedor {
	-webkit-perspective: 500px;
	perspective: 500px;
	perspective-origin: 50% 50%;
}

.cubo, .cubo .cara, .cubo .cara-fondo {
	height: 290px;
	width: 290px;
}

.cubo {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;

	-webkit-transform: rotateX(0deg) rotateY(-30deg);
	transform: rotateX( 0deg ) rotateY( -30deg );
	margin: 150px auto;

	-webkit-animation: giro 20s infinite linear;
	animation: giro 20s infinite linear;
}

.cubo .cara {
	position: absolute;
	border: 5px solid blue;
	border-radius: 25px;
}

.cubo .cara img {
	border-radius: 25px;
}

.cubo .cara-fondo{
	background: blue;
	position: absolute;
	border: 5px solid blue;
	border-radius: 19px;

}

/*Cara frontal*/
.cubo .cara:nth-child(1) {
	-webkit-transform: translateZ(150px);
	transform: translateZ(150px);
}
/*Cara posterior*/
.cubo .cara:nth-child(2) {
	-webkit-transform: rotateY(180deg) translateZ(150px);
	transform: rotateY(180deg) translateZ(150px);
}
/*Cara izquierda*/
.cubo .cara:nth-child(3) {
	-webkit-transform: rotateY(-90deg) translateZ(150px);
	transform: rotateY(-90deg) translateZ(150px);
}
/*Cara derecha*/
.cubo .cara:nth-child(4) {
	-webkit-transform: rotateY(90deg) translateZ(150px);
	transform: rotateY(90deg) translateZ(150px);
}
/*Cara superior*/
.cubo .cara:nth-child(5) {
	-webkit-transform: rotateX(90deg) translateZ(150px);
	transform: rotateX(90deg) translateZ(150px);
}
/*Cara inferior*/
.cubo .cara:nth-child(6) {
	-webkit-transform: rotateX(-90deg) translateZ(150px);
	transform: rotateX(-90deg) translateZ(150px);
}


/************Caras posteriores*************/
/*Cara frontal*/
.cubo .cara-fondo:nth-child(7) {
	-webkit-transform: translateZ(149px);
	transform: translateZ(149px);
}
/*Cara posterior*/
.cubo .cara-fondo:nth-child(8) {
	-webkit-transform: rotateY(180deg) translateZ(149px);
	transform: rotateY(180deg) translateZ(149px);
}
/*Cara izquierda*/
.cubo .cara-fondo:nth-child(9) {
	-webkit-transform: rotateY(-90deg)...