HTML Dog
Skip to navigation

2D transforms

Manipulating the size, shape, and position of boxes with the transform property.

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>2D Transforms</title>
	<style>
		body {
			font: 15px/1.5 helvetica, arial, sans-serif;
			background: #333;
			color: #ccc;
			margin: 50px 0 50px 50px;
		}
		a, code { color: #fff }
		p { margin-bottom: 50px }
	
		pre, #htmldog {
			float: left;
			height: 300px;
			width: 300px;
			background-color: #666;
			margin: 0 50px 50px 0;
			white-space: normal;
		}
		pre code {
			display: block;
			height: 260px;
			background: rgba(255,204,000,.7);
			padding: 20px;
		}

		#c0 {
			-webkit-transform: none; /* for some older browsers */
			-ms-transform: none; /* for IE9 */
			transform: none; /* default, obvs */
		}
		#c1 {
			-webkit-transform: rotate(10deg);
			-ms-transform: rotate(10deg);
			transform: rotate(10deg);
		}
		#c2 {
			-webkit-transform: skewX(10deg);
			-ms-transform: skewX(10deg);
			transform: skewX(10deg);
		}
		#c3 {
			-webkit-transform: skewY(-10deg);
			-ms-transform: skewY(-10deg);
			transform: skewY(-10deg);
		}
		#c4 {
			-webkit-transform: skew(10deg, -10deg);
			-ms-transform: skew(10deg, -10deg);
			transform: skew(10deg, -10deg);
		}
		#c5 {
			-webkit-transform: scale(0.8);
			-ms-transform: scale(0.8);
			transform: scale(0.8);
		}
		#c6 {
			-webkit-transform: scale(0.8, 1.2);
			-ms-transform: scale(0.8, 1.2);
			transform: scale(0.8, 1.2);
		}
		#c7 {
			-webkit-transform: translate(25px, 10px);
			-ms-transform: translate(25px, 10px);
			transform: translate(25px, 10px);
		}
		#c8 {
			-webkit-transform: scale(0.8) rotate(10deg) translate(25px, 10px);
			-ms-transform: scale(0.8) rotate(10deg) translate(25px, 10px);
			transform: scale(0.8) rotate(10deg) translate(25px, 10px);
		}
		#c9 {
			-webkit-transform: matrix(0.787846, 0.138919, -0.138919, 0.787846, 18.307, 11.3514);
			-ms-transform: matrix(0.787846, 0.138919, -0.138919, 0.787846, 18.307, 11.3514);
			transform: matrix(0.787846, 0.138919, -0.138919, 0.787846, 18.307, 11.3514);
		}

		#htmldog a {
			display: block;
			padding: 105px 90px;
			background: rgba(255,204,000,.7);
			-webkit-transform: scale(.8);
			-ms-transform: scale(.8);
			transform: scale(.8);
			transition: .7s transform cubic-bezier(0.5,1.5,0.5,-0.5);
		}
		#htmldog a:hover {
			-webkit-transform: scale(1);
			-ms-transform: scale(1);
			transform: scale(1);
		}
	</style>
</head>
<body>
	<h1><a href="http://www.htmldog.com/guides/css/advanced/transformations/">2D Transforms</a></h1>
	<p>Using the <a href="http://www.htmldog.com/references/css/properties/transform/"><code>transform</code></a> CSS property.</p>

	<pre><code id="c0">transform: none;</code></pre>

	<pre><code id="c1">transform: rotate(10deg);</code></pre>

	<pre><code id="c2">transform: skewX(10deg);</code></pre>

	<pre><code id="c3">transform: skewY(-10deg);</code></pre>

	<pre><code id="c4">transform: skew(10deg, -10deg);</code></pre>

	<pre><code id="c5">transform: scale(0.8);</code></pre>

	<pre><code id="c6">transform: scale(0.8, 1.2);</code></pre>

	<pre><code id="c7">transform: translate(25px, 10px);</code></pre>

	<pre><code id="c8">transform: scale(0.8) rotate(10deg) translate(25px, 10px);</code></pre>

	<pre><code id="c9">transform: matrix(0.787846, 0.138919, -0.138919, 0.787846, 18.307, 11.3514);</code></pre>

	<!-- Link back to HTML Dog: -->
	<p id="htmldog"><a href="http://www.htmldog.com/examples/"><img src="http://www.htmldog.com/badge1.gif" alt="HTML Dog" width="120" height="90"></a></p>
</body>
</html>

Output

View original