Why the code is not executed in turn? Does at the same time. How can he be forced to perform a first turn, then an increase in the height and width of the .cube container, and then an increase in the height and width at the very side of #side2 (for example). The delay property does not work, I don’t know why, maybe I’m putting it there. Please tell me if you can.

Js:

 $(".link2").on("click", function() { $('.cube').css("transform", "rotate3d(0,1,0,270deg)"); $('.main-cube').css("top", "10%"); $(".cube").addClass("active-cube"); $('#side2').delay(2500) .animate({ width: "90vw" }, 1000 ) .animate({ height: "90vh" }, 1000 ); });

CSS:

 .active-cube { width: 90vw; height: 45vh; }
  • I don't see animated resizing .cube - Yuri
  • there is no animation needed. With the help of addclass, the container is simply expanded, in which space is already given for the animation extension # side2 - Vladimir Abramovich

1 answer 1

delay works, your error does not reproduce:

 $(".link2").on("click", function() { $('.container').css("transform", "rotate3d(0,1,0,270deg)"); $(".container").addClass("active-cube"); $('#side2').delay(2500) .animate({ width: "90vw" }, 1000 ) .animate({ height: "90vh" }, 1000 ); }); 
 BODY { perspective: 500px; perspective-origin: center -5em; } .side, .container { width: 10em; height: 10em; } .container { margin: 5em auto 0; border: 2px dotted white; transform-style: preserve-3d; transition: transform ease 1s; } .container:before, .container:after { content: ""; display: block; position: absolute; width: 10em; height: 10em; border: 2px dotted white; } .container:before { transform: rotateX(90deg); } .container:after { transform: rotatey(90deg); } .side { position: absolute; width: 10em; height: 10em; border: 2px solid white; opacity: .7; } .back { transform: translateZ(-5em); background: orange; } .left { transform: translateX(-5em) rotateY(90deg); background: lightgreen; } .right { transform: translateX(5em) rotateY(90deg); background: yellowgreen; } .top { transform: translateY(-5em) rotateX(90deg); background: skyblue; } .bottom { transform: translateY(5em) rotateX(90deg); background: steelblue; } .front { transform: translateZ(5em); background: gold; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" class="link2">link 2</a> <div class="container"> <div class="back side"></div> <div class="left side"></div> <div id="side2" class="right side"></div> <div class="top side"></div> <div class="bottom side"></div> <div class="front side"></div> </div>

  • Where did you get all these styles? - Yuri
  • You have an interesting approach to the container. I have three levels, you have two, maybe that's my problem. That is, I immediately have a main-cube cube container, then .cube is the cube itself (pos relation) and side1 side2, and so on (pos absolute), these are the sides themselves. Ida, the question is where does the active side disappear. I made your version in the codepen and when you turn the active side increases and flies away into strange distances :) - Vladimir Abramovich