Task: there is such a cube

<nav> <ul class="main-menu"> <li><a class="link1" href="#side1">Сторона 1</a></li> <li><a class="link2" href="#side2">Сторона 2</a></li> <li><a class="link3" href="#side3">Сторона 3</a></li> <li><a class="link4" href="#side4">Сторона 4</a></li> <li><a class="link5" href="#side5">Сторона 5</a></li> <li><a class="link6" href="#side6">Сторона 6</a></li> </ul> </nav> <div class="main-cube"> <div class="cube"> <div class="side" id="side1">1</div> <div class="side" id="side2">2</div> <div class="side" id="side3">3</div> <div class="side" id="side4">4</div> <div class="side" id="side5">5</div> <div class="side" id="side6">6</div> </div> </div> <script> $(".link1").click(function() { $('.cube').css("transform", "rotate3d(0,1,0,0deg)"); }); $(".link2").click(function() { $('.cube').css("transform", "rotate3d(0,1,0,270deg)"); }); $(".link3").click(function() { $('.cube').css("transform", "rotate3d(0,1,0,90deg)"); }); $(".link4").click(function() { $('.cube').css("transform", "rotate3d(1,0,0,270deg)"); }); $(".link5").click(function() { $('.cube').css("transform", "rotate3d(1,0,0,90deg)"); }); $(".link6").click(function() { $('.cube').css("transform", "rotate3d(0,1,0,180deg)"); }); </script>

It is necessary for it to increase its front side (class side ), there are six such sides, and it is necessary that only the one we are looking at increase, and when we click on the link so that this side returns the original dimensions, the cube unfolds and again that other front side increases width and height values ​​to 90vw and 90vh respectively.

I will describe it even easier: if .side = rotateY(90deg) then we increase the dimensions of this side width = 90vw , height = 90vh . And to make this happen through setTimeOut . That is, the cube turned, the width increased, then the height, if you pressed the other side, the width and height compressed to default values ​​( 600х600 pixel ), the cube turned and again that other side increased to values width = 90vw , height = 90vh.

All peregulil pereyandeksil no answer. Maybe at least some promise?

    1 answer 1

    Create a class:

     .active.side{ width:90vw; height:90vw; transition: top 1s ease-out 0.5s; // 1s - длительность анимации // 0.5s - задержка }

    If you want to remove the size without delay

     .side{ transition-delay: 0; }

    We add the required class by clicking on the menu item:

     var side=$('.cube .side').eq(1) //1 - нужная сторона куба side.addClass('active').siblings().removeClass('active')