hfts_rider, жми кнопку
макс START
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.clBox{
-webkit-transition: all 3s ease-in-out;
-moz-transition: all 3s ease-in-out;
-o-transition: all 3s ease-in-out;
-ms-transition: all 3s ease-in-out;
transition: all 3s ease-in-out;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
function Boxs(width,height,bgColor){
this.width = width;
this.height = height;
this.bgColor = bgColor;
}
var box = new Boxs(250,250,'green');
var box2 = new Boxs(200,200,'yellow');
//Создание коробки
Boxs.prototype.createBox = function(width,height,bgColor){
$('#idDiv').append('<div class="clBox"></div>');
$('.clBox:last').css({'width' : this.width+'px', 'height' : this.height+'px', 'background-color' : this.bgColor, 'margin' : '80px'});
this.el = $('.clBox:last')
}
box.createBox();
box2.createBox();
var i = 0;
var timer;
//Поворот коробки
Boxs.prototype.rotateBox = function(i){
this.el.css({'transform' : 'rotate('+ i +'deg)'});
};
box2.rotateBox(45);
$('.startInterval').click(function(){
box.rotateBox(25);
});
});
</script>
</head>
<body>
<div id="idDiv"></div>
<div class="startInterval">[START]</div>
<div class="stopInterval">[STOP]</div>
</body>
</html>