Click on the tiles on the right hand side to rotate.
Demo
The Code
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Rotating Tiles</title>
<style>
#block-1 { background: #d5fcff; }
#block-2 { background: #e1ffd5; }
#block-3 { background: #ffffd8; }
#rotator > div {
position: absolute;
overflow: hidden;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
#rotator .active { top: 20px; left: 20px; width: 580px; height: 280px; }
#rotator .non-active-top { top: 20px; left: 620px; height: 130px; width: 320px; }
#rotator .non-active-bottom { top: 170px; left: 620px; height: 130px; width: 320px; }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
<script>
// DOM Ready
$(function() {
var current;
function rotate() {
if (current == 1) {
$("#block-1").removeClass().addClass("active");
$("#block-2").removeClass().addClass("non-active-top");
$("#block-3").removeClass().addClass("non-active-bottom");
} else if (current == 2) {
$("#block-1").removeClass().addClass("non-active-bottom");
$("#block-2").removeClass().addClass("active");
$("#block-3").removeClass().addClass("non-active-top");
} else {
$("#block-1").removeClass().addClass("non-active-top");
$("#block-2").removeClass().addClass("non-active-bottom");
$("#block-3").removeClass().addClass("active");
}
}
$("#rotator div").click(function() {
current = this.id.substr(6);
rotate();
});
});
</script>
</head>
<body>
<div id="rotator">
<div id="block-1" class="active"></div>
<div id="block-2" class="non-active-top"></div>
<div id="block-3" class="non-active-bottom"></div>
</div>
</body>
</html>
Originally taken from the website: http://css-tricks.com/examples/RotatingBlocks/
No comments:
Post a Comment