/*** CSS3 VQS | Chapter 12 | transformation-transition-properties.css ***/

* {
	-webkit-transition: color .25s ease-in, opacity .5s ease, -webkit-transform .25s ease-in-out 0;
	-moz-transition: color .25s ease-in, opacity .5s ease, -moz-transform .25s ease-in-out 0;
	-o-transition: color .25s ease-in, opacity .5s ease, -o-transform .25s ease-in-out 0;
	transition: color .25s ease-in, opacity .5s ease, transform .25 ease-in-out 0;  }

aside {
	-webkit-transform: rotate(-2deg);
	-moz-transform: rotate(-2deg);
	-o-transform: rotate(-2deg);
	transform: rotate(-2deg); }

div.gallery figure {
	width: auto;
	-webkit-transform-origin: left 25%;
	-moz-transform-origin: left 25%;
	-o-transform-origin: left 25%;
	transform-origin: left 25%;
	-webkit-transform-style: flat;
	transform-style: flat;
	-webkit-perspective: 5000;
	perspective: 5000;
	-webkit-perspective-origin: 25% 25%;
	perspective-origin: 25% 25%;
	-webkit-backface-visibility: visible;
	backface-visibility: visible; }

#f1 {
	-webkit-transform: perspective(250) scale3d(.75,.5,1) rotate3d(5,4,2,-10deg);
	-moz-transform: scale(.75) rotate(10deg);
	-o-transform: scale(.75) rotate(10deg);
	transform: scale(.75) rotate(10deg); }

#f2 {
	-webkit-transform: perspective(250) scale3d(.5,.75,1.5) rotate3d(-3,10,-8,18deg);
	-moz-transform:scale(.75) rotate(-8deg);
	-o-transform: scale(.75) rotate(-8deg);
	transform: scale(.75) rotate(-8deg); }

#f3 {
	-webkit-transform: perspective(250) scale3d(1,.5,.75) rotate3d(3,6,10,20deg);
	-moz-transform: scale(.75)rotate(3deg);
	-o-transform: scale(.75) rotate(3deg);
	transform: scale(.75) rotate(3deg); }

#f1:hover, #f2:hover, #f3:hover {
	opacity: 1;
	-webkit-transform: rotate(0);
	-moz-transform: rotate(0);
	-o-transform: rotate(0);
	transform: rotate(0);
	cursor: pointer;
	clip: auto;
	z-index: 9999; }