2d-rotate-ref.html

Enable keyboard shortcuts

<!DOCTYPE html>

<html>

	<head>

	    <title>CSS Test: CSS Transform using 2d rotate()</title>

	    <link rel="author" title="Rick Hurst" href="http://mrkn.co/axegs">

		<link rel="mismatch" href="2d-rotate-notref.html">

	    <meta name="flags" content="svg">

	    <style type="text/css">

			svg{

				position: absolute;

				top: 220px;

				left: 60px;

		</style>

	</head>

	<body>

		<p>You should only see one block with color green, and you should not see any red</p>

		<section>

			<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="200">

				<style type="text/css">

				rect{

					stroke-width: 10;

					stroke: green;

					fill: none;

			    </style>

				<rect height="110" width="110" y="-38" x="120" transform="rotate(30)"/>

			</svg>

		</section>

	</body>

</html>