<!doctype html>
<html>
<head>
<title>Rotate</title>
<script src="./jquery.js"></script>
<script>
$(function() {
function state1() {
$(".rotate").removeClass("r2");
$(".rotate").addClass("r1");
setTimeout(state2, 90);
}
function state2() {
$(".rotate").removeClass("r1");
$(".rotate").addClass("r2");
setTimeout(state1, 90);
}
state1();
})
</script>
<style>
body {
background: url(wood-oak.jpg);
}
.tips {
width: 650px;
margin: 110px auto 0;
font-family: Verdana, Geneva, sans-serif;
color: #FFC;
font-size: 26px;
}
.dock {
margin: 90px auto 0;
width: 500px;
}
.board {
float: left;
margin-top: -60px;
z-index: 0;
}
.rotate {
width: 70px;
height: 70px;
margin: 20px 10px;
z-index: 1;
}
.r1 {
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
}
.r2 {
-moz-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
-o-transform: rotate(2deg);
}
</style>
</head>
<body>
<div class="dock">
<img src="./Chrome.png" class="rotate r1" alt="icon">
<img src="./FireFox.png" class="rotate r1" alt="icon">
<img src="./IE.png" class="rotate r1" alt="icon">
<img src="./Opera.png" class="rotate r1" alt="icon">
<img src="./Safari.png" class="rotate r1" alt="icon">
</div>
<img class="board" src="./woodboard1.png">
</body>
</html>
