Pablo Mármol CSS3 Zoom

by JuanMa

HTML

<p>Coloca el Puntero encima.</p>

<div class="pablo">
	<div class="cabeza"></div>
	<div class="pelo2"></div>
	<div class="pelo1"></div>
	<div class="tupe1"></div>
	<div class="tupe2"></div>
	<div class="barba"></div>
	<div class="boca1"></div>
	<div class="boca2"></div>
	<div class="boca3"></div>
	<div class="camiseta1"></div>
	<div class="camiseta2"></div>
	<div class="brazo"></div>
	<div class="ojo-iz"></div>
	<div class="ojo-dch"></div>
	<div class="oreja"></div>
	<div class="nariz"></div>
	<div class="firma">OLMID</div>
</div>

CSS

.pablo{
	position: relative;
	width: 500px;
	height: 500px;
	top: -200px;
	left: -200px;
	border: 3px solid #000;
	overflow:hidden;
	background: #f6e6b4;
	background: -moz-linear-gradient(top,  #f6e6b4 0%, #ed9017 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6e6b4), color-stop(100%,#ed9017));
	background: -webkit-linear-gradient(top,  #f6e6b4 0%,#ed9017 100%);
	background: -o-linear-gradient(top,  #f6e6b4 0%,#ed9017 100%);
	background: -ms-linear-gradient(top,  #f6e6b4 0%,#ed9017 100%);
	background: linear-gradient(to bottom,  #f6e6b4 0%,#ed9017 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 );
	-webkit-transform : scale(0.2);
	-moz-transform : scale(0.2);
	-ms-transform : scale(0.2);
	-o-transform : scale(0.2);
	transform : scale(0.2);
	-webkit-transition: 2s;
	-moz-transition: 2s;
	-o-transition: 2s;
	transition: 2s;
}
.pablo:hover{
	top: 5px;
	left: 5px;
	-webkit-transform : scale(1);
	-moz-transform : scale(1);
	-ms-transform : scale(1);
	-o-transform : scale(1);
	transform : scale(1);
}
.pablo .tupe1{
	position: absolute;
	background: #F8E133;
	width: 280px;
	height: 60px;
	top: 31px;
	left: 145px;
	border-radius: 40% 50% 0% 0% / 100% 100% 0% 0%;
	border: 1px solid #F8E133;
	-webkit-transform: rotate(17deg);
	-moz-transform: rotate(17deg);
	-ms-transform: rotate(17deg);
	-o-transform: rotate(17deg);
	transform: rotate(17deg);
}
.pablo .tupe1:before{
	content:"";
	position: absolute;
	clip:rect(0px,185px,50px,0px);
	background: #F8E133;
	width: 205px;
	height: 72px;
	top: 40px;
	left: -52px;
	border-radius: 50% 50% 0% 0% / 100% 100% 0% 0%;
	border: 1px solid #F8E133;
	-webkit-transform: rotate(-22deg);
	-moz-transform: rotate(-22deg);
	-ms-transform: rotate(-22deg);
	-o-transform: rotate(-22deg);
	transform: rotate(-22deg);
}
.pablo .tupe2{
	position: absolute;
	width: 330px;
	height: 170px;
	top: 84px;
	left: 70px;
	border-radius: 50% 50% 50% 50%...