Transforms

by hannahtaylor

HTML

<h1>Hover over each tile to see it transform</h1>
<div class="tile" id="tile1">Rotate</div>
<div class="tile" id="tile2">Skew</div>
<div class="tile" id="tile3">Move</div>
<div class="tile" id="tile4">Scale</div>

CSS

h1 {
	font-family: "arial", sans-serif;
	color: #2f3e46;
	font-size: 20px;
}

.tile {
	width: 60px;
	height: 90px;
	background-color: #2f3e46;
	color: white;
	font-family: "arial", sans-serif;
	margin: 5px 5px 0px 5px;
	padding-top: 20px;
	text-align: center;
	border: 5px solid #84a98c;
	display: inline-block;
}

#tile1:hover{
	transform: rotate(45deg);
}

#tile2:hover{
	transform: skew(10deg, 20deg);
}

#tile3:hover{
	transform: translateX(10px);
}

#tile4:hover{
	transform: scale(1.15);
}