Skew Transform Practice


by Jeremy Caudle
code

Playing around with a simple skew transform today. Not particularly difficult or deep in any way. Tonight's was a quickie.

View the code:

HTML and JS 
<div class="codedoodle-block">
		<a class="square" href="#">Test</a>
		</div>
CSS 
.codedoodle-block {
				margin: 1rem auto;
				padding: 1rem;
				background-color: rgba(0, 0, 0, .2);
			}
			
			.square {
				display: block;
				padding: 1rem;
				text-decoration: none;
				background-color: rgba(0, 125, 125, .75);
				max-width: 5rem;
				transition: all .25s ease-in-out;
				margin: 0 auto;
				text-align: center;
				text-transform: uppercase;
			}
			
			.square:hover, .square:active, .square:focus {
				background-color: red;
				transform: skew(10deg, 10deg);
			}

Tags