Results 1 to 2 of 2

Thread: Animating Transformations

  1. #1
    Join Date
    Apr 2013

    Post Animating Transformations

    This is what I'm trying to do: (look at the bottom)

    This is what I did:
    HTML Code:
    <div id="box">
      <div class="square">prvi</div>
      <div class="square">drugi</div>
      <div class="square" style="z-index: 2">treci</div>
      <div class="square">cetvrti</div>
    <script language="JavaScript" type="text/javascript" 
      var transforms = [
      'skewY(-45deg) scale(.66)',
      'translate(20px) skewY(-45deg) scale(.66)',
      'translate(150px,50px) scale(1.5,1)',
      'translate(280px) skewY(45deg) scale(.66)',
      'translate(300px) skewY(45deg) scale(.66)'
      $squares = $('#box .square').each(function(i) {
          $(this).css({ transform: transforms[i] });
      $('#box').mouseenter(function() {
          $squares.each(function(i) {
            $(this).animate({ '-moz-transform': transforms[i+1] });
        }).mouseleave(function() {
          $squares.each(function(i) {
            $(this).animate({ transform: transforms[i] });
    HTML Code:
    #box {
            width: 400px;
            height: 150px;
            position: relative;
    .square {
            width: 100px;
            height: 100px;
            margin: 20px 0px;
            position: absolute;
    /*just to see them*/
    .square:nth-child(1) {
            background-color: #0c0;
    .square:nth-child(2) {
            background-color: #0d0;
    .square:nth-child(3) {
            background-color: #5a5;
    .square:nth-child(4) {
            background-color: #087;
    I found out that I can use jquery to make those changes, but not to animate it.
    Is there someone here that can make this work?

  2. #2
    Join Date
    Apr 2013

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center

Recent Articles