There are two blocks that are two sides of the same cube. One block is hidden by default. When you press the button, the hidden block replaces the open; it should give the impression that we turned the cube.

Hidden

#hid{width:0px;display:block;position:absolute;-webkit-transform:rotateY(90deg);}

Block in a hidden block

 #in_hid{width:500px;background-color:#456789;}

Open

 #ext{width:500;background-color:#987654;} #hid,#ext{-webkit-transition:all 2s;} <div id="cont"> <div id="hid"><div id="in_hid">Текст</div></div> <div id="ext"></div> </div>

When you press a button

 $(ext).css('transform','translateX(275px) rotateY(90deg)'); $(hid).css('transform','translateX(0px) rotateY(0deg)');

But while rotating, one block climbs onto another and the whole effect spoils? How can you create such an effect without plug-ins?

  • one
    First, the cube has six sides, not two. 2, for the three-dimensional witchcraft jquery is not good to use, it is like a microscope to hammer nails, there are a lot of other libraries for drawing - deivan_

1 answer 1

Demo

Source: http://www.webdesignerdepot.com/

  <div id ="cub"> <a href="http://www.cisco.com/en/US/hmpgs/index.html" class="external roll-link" rel="nofollow"><span data-title="Cisco">Cisco</span></a> </div> #cub {margin-top:40px;} /* ROLL LINKS */ .roll-link { display: inline-block; overflow: hidden; vertical-align: top; -webkit-perspective: 600px; -moz-perspective: 600px; -ms-perspective: 600px; perspective: 600px; -webkit-perspective-origin: 50% 50%; -moz-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; perspective-origin: 50% 50%; background: yellow; } .roll-link:hover {text-decoration:none;} .roll-link span { display: block; position: relative; padding: 0 2px; -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -ms-transition: all 400ms ease; transition: all 400ms ease; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .roll-link:hover span { background: #e93a30; -webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg ); -moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg ); -ms-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg ); transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg ); } .roll-link span:after { content: attr(data-title); display: block; position: absolute; left: 0; top: 0; padding: 0 2px; color: #fff; background: #e93a30; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg ); -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg ); -ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg ); transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg ); }
  • and where is jQuery here? .. - deivan_