Mick Redman: rotate

Monday, 18 October 2010

Cross browser rotating divs using jQuery

Below, I have used the jQuery plugin called rotate at http://code.google.com/p/jquery-rotate/
Normally, I like to refer to these online, but for some reason, it didn't work, so you'll have to download it as I have done in the example below. Another unfortunately, is that I had to create a wrapper for IE. The code is still quite small.

See demo.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Rotate text</title>
<style>
body
{
font-family:Sans-serif;
}
#wrapper
{
margin:0 auto;
width:300px;
height:300px;
}
#container
{

width:200px;
height:200px;
background:#FF0000;
color:#FFFFFF;
border:2px solid #000000;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script src="scripts/jquery.rotate.js"></script>
<script>
$(document).ready(function()
{
$('#container').css('rotate',6.1);
});
</script>
</head>
<body>
<br /><br />
<div id="wrapper">
<div id="container">
<h1>Hello World!</h1>
</div>
</div>
</body>
</HTML>

Friday, 27 August 2010

Rotating boxes without images

Most rotating box CSS examples do not work cross browser. I like to try and avoid simulating this with, for example, pictures created at an angle in a good graphics package (like GIMP). Today however, I found this web page http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/. Not all the functionality works at this stage, but enough to get going. You'll need to get hold of the JavaScript libraries first. You can also take off the backgrounds and just use the technique for rotating text. My example below is a simple one.

See demo.

<!DOCTYPE html>
<html lang="ene">
<head>
<meta charset="UTF-8">
<title>Rotate text</title>
<style>
body
{
font-family:Sans-serif;
}
#box1
{
position: absolute;
top: 45px;
left: 45px;
border: solid 1px #CCCCCC;
position: absolute;
width: 100px;
height: 100px;
padding: 10px;
-sand-transform:rotate(45deg);
}
#box2
{
position: absolute;
top: 45px;
left: 160px;
border: solid 1px #CCCCCC;
background:#a3a3a3;
width: 200px;
height: 200px;
padding: 10px;
-sand-transform:rotate(-25deg);
}
</style>
<script src="scripts/EventHelpers.js"></script>
<script src="scripts/cssQuery-p.js"></script>
<script src="scripts/sylvester.js"></script>
<script src="scripts/cssSandpaper.js"></script>
</head>
<body>
<div id="box1" style="-webkit-transform: rotate(45deg); ">
-sand-transform: rotate(45deg);
</div>
<div id="box2" style="-webkit-transform: rotate(-45deg); ">
-sand-transform: rotate(-45deg);
</div>
</body>
</html>