Cajas 3D con css3 animadas (especial para películas o libros)

closeHola! hace 3 years 9 months 14 days que escribí esta entrada, puede que esta información ya no sea valida en la actualidad, por favor se comprensivo conmigo cuando comentes 🙂

Hoy quiero compartir este código de como hacer cajas 3D que con un click puedan rotar, el diseño esta hecho orientado a cajas de películas, pero puede ser usado para cualquier tipo de cajas incluso libros.

Bueno sin mas palabras les dejo el código y un ejemplo de las cajas en 3d con css3 (Box 3D Pure CSS3)

 

 

El código CSS para los efectos es el siguiente:

 

.box-list {
	list-style: none;
	position: relative;
 
}
 
.box-list li {
	position: relative;
	width: 300px;
	float: left;
	z-index: 1;
	height: 400px;
	margin: 0px 50px 40px 0;
	-webkit-perspective: 1800px;
	-moz-perspective: 1800px;
	perspective: 1800px;
}
 
.box-list li:last-child {
	margin-right: 0;
}
 
 
.box-list li .box-case {
	position: absolute;
	width: 100%;
	height: 400px;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition: -webkit-transform .5s;
	-moz-transition: -moz-transform .5s;
	transition: transform .5s;
}
 
.box-list li .box-case.box-casedefault:hover {
	-webkit-transform: rotate3d(0,1,0,35deg);
	-moz-transform: rotate3d(0,1,0,35deg);
	transform: rotate3d(0,1,0,35deg);
}
.box-list li .box-case.box-viewback:hover {
	-webkit-transform: rotate3d(0,1,0,150deg);
	-moz-transform: rotate3d(0,1,0,150deg);
	transform: rotate3d(0,1,0,150deg);
}
 
.box-list li .box-case > div,
.box-list li .box-front > div {
	display: block;
	position: absolute;
}
 
.box-list li .box-front {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform-origin: 0% 50%;
	-moz-transform-origin: 0% 50%;
	transform-origin: 0% 50%;
	-webkit-transition: -webkit-transform .5s;
	-moz-transition: -moz-transform .5s;
	transition: transform .5s;
	-webkit-transform: translate3d(0,0,20px);
	-moz-transform: translate3d(0,0,20px);
	transform: translate3d(0,0,20px);
	z-index: 10;
}
 
.box-list li .box-front > div {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
 
.box-list li .box-front,
.box-list li .box-back,
.box-list li .box-front > div {
	width: 300px;
	height: 400px;
}
 
.box-list li .box-left,
.box-list li .box-right {
	width: 40px;
	left: -20px;
}
 
.box-list li .box-top,
.box-list li .box-bottom {
	width: 295px;
	height: 40px;
	top: -15px;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}
 
.box-list li .box-back {
	-webkit-transform: rotate3d(0,1,0,-180deg) translate3d(0,0,20px);
	-moz-transform: rotate3d(0,1,0,-180deg) translate3d(0,0,20px);
	transform: rotate3d(0,1,0,-180deg) translate3d(0,0,20px);
	box-shadow: 10px 10px 30px rgba(0,0,0,0.4);
	border-radius: 3px 0 0 3px;
}
 
.box-list li .box-cover-back {
	background-color: #000;
	-webkit-transform: rotate3d(0,1,0,-180deg);
	-moz-transform: rotate3d(0,1,0,-180deg);
	transform: rotate3d(0,1,0,-180deg);
}
 
.box-list li .box-right {
	height: 390px;
	top: 5px;
	-webkit-transform: rotate3d(0,1,0,90deg) translate3d(0,0,295px);
	-moz-transform: rotate3d(0,1,0,90deg) translate3d(0,0,295px);
	transform: rotate3d(0,1,0,90deg) translate3d(0,0,295px);
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}
 
.box-list li .box-left {
	height: 400px;
	-webkit-transform: rotate3d(0,1,0,-90deg);
	-moz-transform: rotate3d(0,1,0,-90deg);
	transform: rotate3d(0,1,0,-90deg);
}
 
.box-list li .box-top {
	-webkit-transform: rotate3d(1,0,0,90deg);
	-moz-transform: rotate3d(1,0,0,90deg);
	transform: rotate3d(1,0,0,90deg);
}
 
.box-list li .box-bottom {
	-webkit-transform: rotate3d(1,0,0,-90deg) translate3d(0,0,390px);
	-moz-transform: rotate3d(1,0,0,-90deg) translate3d(0,0,390px);
	transform: rotate3d(1,0,0,-90deg) translate3d(0,0,390px);
}
 
 
.box-list li .box-viewinside .box-front {
	-webkit-transform: translate3d(0,0,20px) rotate3d(0,1,0,-160deg);
	-moz-transform: translate3d(0,0,20px) rotate3d(0,1,0,-160deg);
	transform: translate3d(0,0,20px) rotate3d(0,1,0,-160deg);
}
 
.box-list li .box-case.box-viewinside {
	-webkit-transform: translate3d(0,0,150px) rotate3d(0,1,0,0deg);
	-moz-transform: translate3d(0,0,150px) rotate3d(0,1,0,0deg);
	transform: translate3d(0,0,150px) rotate3d(0,1,0,0deg);
}
 
.box-list li .box-case.box-viewback {
	-webkit-transform: translate3d(0,0,0px) rotate3d(0,1,0,180deg);
	-moz-transform: translate3d(0,0,0px) rotate3d(0,1,0,180deg);
	transform: translate3d(0,0,0px) rotate3d(0,1,0,180deg);
}
 
.box-list li .box-viewback .box-back {
	z-index: 10;
}
 
 
.box-list li .box-page,
.box-list li .box-right,
.box-list li .box-top,
.box-list li .box-bottom {
	background-color: #fff;
}
 
.box-list li .box-front > div {
	border-radius: 0 3px 3px 0;
	box-shadow: 
		inset 4px 0 10px rgba(0, 0, 0, 0.1);
}
 
.box-list li .box-front:after {
	content: '';
	position: absolute;
	top: 1px;
	bottom: 1px;
	left: -1px;
	width: 1px;
}
 
 
.box-list li .box-back:after {
	left: auto;
	right: 10px;
}
 
 
 
 
/* case 1 */
.case-1 .box-front > div,
.case-1 .box-back,
.case-1 .box-left,
.case-1 .box-front:after {
	background-color: #2B2B2B;
}
 
.case-1 .box-cover {
 
}
 
 
.case-1 .hedaer
{
 
	width: 100%;
	height: 30px;
	background:  url("../images/header.png") no-repeat;
}
 
 
.no-csstransforms3d .box-list li .box-case > div,
.no-csstransforms3d .box-list li .box-case .box-cover-back {
	display: none;
}
 
.no-csstransforms3d .box-list li .box-case > div.box-front {
	display: block;
}
 
.no-csstransforms3d .box-info button,
.no-js .box-info button {
	display: none;
}

El código html es el siguiente:

 
<ul id="box-list" class="box-list clearfix">
 
					<li>
						<div class="box-case case-1 box-casedefault">
							<div class="box-front">
								<div class="box-cover">
									<div class="hedaer"></div>
									<img src="images/front.png">					
								</div>
								<div class="box-cover-back"></div>
							</div>							
							<div class="box-back">
								<img src="images/back.png">						
							</div>
							<div class="box-right"></div>
							<div class="box-left">
								<img src="images/left.png">
							</div>
							<div class="box-top"></div>
							<div class="box-bottom"></div>
						</div>						
					</li>
</ul>

Veamos el resultado del ejemplo ya funcionando:


Ver el Ejemplo

Espero que les sea de mucha utilidad…

You may also like...

Deja un comentario

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