transformations.css

@font-face {
    font-family: 'KomikaAxisRegular';
    src: url('KOMIKAX_-webfont.eot');
    src: url('KOMIKAX_-webfont.eot?#iefix') format('embedded-opentype'),
         url('KOMIKAX_-webfont.woff') format('woff'),
         url('KOMIKAX_-webfont.ttf') format('truetype'),
         url('KOMIKAX_-webfont.svg#KomikaAxisRegular') format('svg');
}

body {
	background-color: aqua;
	padding-top:200px;
	padding-left: 100px;
}

.box {
	width: 100px;
	height: 80px;
	border: 2px solid black;
	padding: 10px;
	margin: 20px;
	float: left;
	font-family: 'KomikaAxisRegular';
	font-size:30px;
	text-align:center;
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
}

#one:hover {
	-webkit-transform: translate(20px,0);
	-moz-transform: translate(20px,0);
	-o-transform: translate(20px,0);
	-ms-transform: translate(20px,0);
	background-color:white;
}

#two:hover {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	border: 20px dotted black;
}

#three:hover {
	-webkit-transform: translate(-40px,-26px);
	-moz-transform: translate(-40px,-26px);
	-o-transform: translate(-40px,-26px);
	-ms-transform: translate(-40px,-26px);
}

#four:hover {
	-webkit-transform: scale(3);
	-moz-transform: scale(3);
	-o-transform: scale(3);
	-ms-transform: scale(3);
}