Edge Smoothness of CSS3 Rotation

[Ahmed Sadman]

There are very nice CSS3 available now: roatate, scale, skew etc. But when I tested it, it was not smooth. For example, I made a navigation bar with 10deg rotation to each button. But I saw that the edge of the buttons are not smooth. It seems just like a low-res photo is zoomed. But why this happens.

Just look at the edges of my uploaded image, they are not smooth at all.

34hyouh.png

Click the image to get the bigger version

[ralph.m]

Some browsers do it better than others. Could you post your code, and tell us what browser/system this was in?

[Ahmed Sadman]

I used Firefox 10.0.2

I have also seen the problem in Chrome, and it doesn't happen with rotate only, it happens with skew too. Here's my code of navigation css.

nav {
	position: relative;
	margin-top: 40px;
	width: 100%;
	font-family: Georgia, Arial, Tahoma, Calibri, sans-serif;
	height: 41px;
	background: transparent;
}
nav li ul {
	display: none;
}
nav ul, nav li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
nav li {
	float: left;
	position: relative;
	margin-right: 6%;
}
nav ul li a {
	display: block;
	padding: 5px 10px;
	background: #D68215;
	text-decoration: none;
	color: white;
	font-size: 1.3em;
	border-radius: 7px;
	-moz-transform:rotate(5deg);
	-webkit-transform:rotate(5deg);
	-o-transform:rotate(5deg);
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	box-shadow: 2px 2px 3px black;
}
nav ul li a:hover {
	color: black;
	background: #EB9B33;
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
}
nav ul li:hover ul {
	font-size: 1em;
	display: block;
	position: absolute;
	left: 0;
	z-index: 10000;
}
nav ul li:hover ul a {
	font-size: 0.9em;
	word-wrap: break-word;
	display: block;
	border-radius: 0;
	box-shadow: none;
}

[ralph.m]

I used Firefox 10.0.2

That's quite old in technology terms. Use an up to date version, first off, as CSS3 is really fr the newest browsers.

Post your HTML too, so that we can test this.

[Ahmed Sadman]

I will try newer versions. And here's the HTML:

<nav>
	<ul>
		<li><a href="index.html">Home</a></li>
		<li><a href="portfolio.html">Portfolio</a></li>
		<li><a href="service.html">Our Services&nbsp;&raquo;</a>
			<ul>
				<li><a href="sub_web.html">Web Design</a></li>
				<li><a href="sub_graph.html">Graphics Design</a></li>
				<li><a href="sub_quote.html">Quotes</a></li>
			</ul>
		</li>
		<li><a href="about.html">About Us&nbsp;&raquo;</a>
			<ul>
				<li><a href="sub_team.html">Our Team</a></li>
				<li><a href="sub_history.html">History</a></li>
			</ul>
		</li>
		<li><a href="contact.html">Contact</a>
	</ul>
</nav>

[ralph.m]

I will try newer versions.

Hm, I just tried it in the latest Firefox and it is still jagged. Looks fine in Chrome. I guess they are still refining this stuff. (I also wonder how useful all these effects are. They don't make content any more accessible that it was, and most people just want to get to the information they need.)