Currently, I have a piece of code that enables my div element to move and change its size.
$(document).ready(function(){
$("#box").animate({
top: "250px",
left: "500px",
width: '300px',
height: '250px',
}, 2000 );
});
While browsing the internet, I stumbled upon a function in jQuery that allows a div to rotate. However, this poses a challenge as jQuery uses CSS for rotation, which means the rotation cannot happen simultaneously with size and position changes.
I am eager to achieve simultaneous rotation, resizing, and repositioning of the div. Is it even possible? If yes, could someone guide me on how to accomplish this?
My current line of thought is to carry out all three animations using CSS instead of jQuery. How can this be achieved, or what would be the most straightforward method to fulfill my objectives? Thank you in advance for your assistance!
The following is the CSS code related to the div:
#box{
-moz-border-radius:15px;
border-radius:15px;
width:1px;
height:1px;
background:#D8D8D8;
border:2px solid black;
position: relative;
margin-left:100px;
margin-top:150px;
}