Pedro Picapiedra en CSS3 Zoom

by JuanMa

HTML

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

<div class="pedro">
	<div class="brazos"></div>
	<div class="cabeza"></div>
	<div class="camiseta"></div>
	<div class="tupe1"></div>
	<div class="tupe2"></div>
	<div class="pelo1"></div>
	<div class="pelo2"></div>
	<div class="barba"></div>
	<div class="boca1"></div>
	<div class="boca2"></div>
	<div class="boca3"></div>
	<div class="ojo-iz"></div>
	<div class="ojo-dch"></div>
	<div class="nariz"></div>
	<div class="oreja"></div>
	<div class="corbata1"></div>
	<div class="corbata2"></div>
	<div class="firma">OLMID</div>
</div>

CSS

.pedro{
	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;
}
.pedro:hover{
	top: 5px;
	left: 5px;
	-webkit-transform : scale(1);
	-moz-transform : scale(1);
	-ms-transform : scale(1);
	-o-transform : scale(1);
	transform : scale(1);
}
.pedro .tupe1{
	position: absolute;
	background: #000;
	width: 190px;
	height: 40px;
	top: 24px;
	left: 210px;
	border-radius: 130% 100% 80% 1% / 220% 175% 60% 1%;
	border: 1px solid #000;
}
.pedro .tupe1:before{
	content:"";
	position: absolute;
	background: #000;
	width: 140px;
	height: 30px;
	top: 26px;
	left: -75px;
	border-radius: 80% 80% 0% 0% / 50% 50% 0% 0%;
	border: 1px solid #000;
	-webkit-transform: rotate(-25deg);
	-moz-transform: rotate(-25deg);
	-ms-transform: rotate(-25deg);
	-o-transform: rotate(-25deg);
	transform: rotate(-25deg);
}
.pedro .tupe1:after{
	content:"";
	position: absolute;
	background: #000;
	width: 90px;
	height: 30px;
	top: 38px;
	left: -25px;
	border: 1px solid #000;
}
.pedro .tupe2{
	position: absolute;
	background: #000;
	width: 190px;
	height: 42px;
	top: 66px;
	left: 255px;
	border-radius: 130% 100% 8% 1% / 240% 230% 8%...