Actually site

http://www.bestcssbuttongenerator.com/

When you click a button, the animation on the right takes place, which you really liked.

I downloaded the page itself, the min.css and min.js files, but nothing worked. Almost nothing. If you remove some embedded js from the page source, then it gives some signs of life directly from css

Closed due to the fact that off-topic participants KAGG Design , aleksandr barakin , Alexey Shimansky , zb ' , Yaroslav Molchan 10 Jun '17 at 11:27 .

It seems that this question does not correspond to the subject of the site. Those who voted to close it indicated the following reasons:

  • “Questions asking for help with debugging (“ why does this code not work? ”) Should include the desired behavior, a specific problem or error, and a minimum code for playing it right in the question . Questions without an explicit description of the problem are useless for other visitors. See How to create minimal, self-sufficient and reproducible example . " - aleksandr barakin, Alexey Shimansky, Yaroslav Molchan
  • "The message contains only the text of the task, in which there is no description of the problem, or the question is purely formal (" how do I do this task ") . To reopen the question, add a description of the specific problem, explain what does not work, what you see the problem. " - KAGG Design, zb '
If the question can be reformulated according to the rules set out in the certificate , edit it .

    3 answers 3

    Here is the relevant css-code (I added the rule for #right#right to change the positioning of the block, the rest is unchanged). The contents of the blocks replaced the screenshots, so as not to drag the extra code.

     $("body").click(function () { $("#right").toggleClass("flipped"); }) 
     #right#right { left: 0; right: 0; margin: auto; } /*************************************************/ #right { background-color: #FFF; border: 1px solid #E1E1E1; overflow-y: auto; overflow-x: hidden; width: 380px; padding: 10px 18px 20px; top: -1px; bottom: 0; left: 870px; -moz-perspective: 800px; -webkit-perspective: 800px; -o-perspective: 800px; perspective: 800px; } #palettes, #reset-button, #right { position: absolute; } #code { -moz-transform: rotateY(-180deg)scale(.1)translateY(-70px); -webkit-transform: rotateY(-180deg)scale(.1)translateY(-70px); -o-transform: rotateY(-180deg)scale(.1)translateY(-70px); transform: rotateY(-180deg)scale(.1)translateY(-70px); filter: alpha(opacity=0); opacity: 0; z-index: 1; } #code, #settings-container { -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -moz-transition: .6s; -webkit-transition: .6s; -o-transition: .6s; transition: 600ms 0ms; } #code { bottom: 20px; top: 20px; left: 20px; right: 20px; } #code, pre { position: absolute; } /*************************************************/ .flipped#right { overflow: hidden; } .flipped #settings-container { -moz-transform: rotateY(180deg)scale(.7); -webkit-transform: rotateY(180deg)scale(.7); -o-transform: rotateY(180deg)scale(.7); transform: rotateY(180deg)scale(.7); filter: alpha(opacity=0); opacity: 0; } .flipped #code { -moz-transform: rotateY(0)scale(1); -webkit-transform: rotateY(0)scale(1); -o-transform: rotateY(0)scale(1); transform: rotateY(0)scale(1); filter: alpha(opacity=100); opacity: 1; z-index: 5; display: block; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="right"> <div id="settings-container"> <img src="//i.stack.imgur.com/hw6ZB.png"> </div> <div id="code"> <img src="//i.stack.imgur.com/md1NU.png"> </div> </div>

    It is written quite cleanly, except for the prefixes, there is almost nothing even to remove ...

      Because tyrit should not be thoughtless, but creatively. Here's how it works:

       $('#cont').click(e => $('#cont').toggleClass('flipped')) 
       #code, #settings-container { background: red; transform-style: preserve-3d; backface-visibility: hidden; transition: .6s; position: absolute; width: 100px; height:100px; } #code { transform: rotateY(-180deg)scale(.1)translateY(-70px); filter: alpha(opacity=0); opacity: 0; z-index: 1; background: green; } .flipped #settings-container { transform: rotateY(180deg)scale(.7); filter: alpha(opacity=0); opacity: 0; } .flipped #code { transform: rotateY(0)scale(1); filter: alpha(opacity=100); opacity: 1; z-index: 5; display: block; } 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="cont" class=""> <div id="settings-container">1</div> <div id="code">2</div> </div> 

         $('button').click(function(){ $('.wrapper').toggleClass('flipped') }); 
         #code,#settings-container { -moz-transform-style:preserve-3d; -webkit-transform-style:preserve-3d; -o-transform-style:preserve-3d; transform-style:preserve-3d; -moz-backface-visibility:hidden; -webkit-backface-visibility:hidden; -o-backface-visibility:hidden; backface-visibility:hidden; -moz-transition:.6s; -webkit-transition:.6s; -o-transition:.6s; transition:.6s } #code { -moz-transform:rotateY(-180deg)scale(.1)translateY(-70px); -webkit-transform:rotateY(-180deg)scale(.1)translateY(-70px); -o-transform:rotateY(-180deg)scale(.1)translateY(-70px); transform:rotateY(-180deg)scale(.1)translateY(-70px); filter:alpha(opacity=0); opacity:0; z-index:1; position: absolute; top: 20px; left: 20px; } .flipped #settings-container { -moz-transform:rotateY(180deg)scale(.7); -webkit-transform:rotateY(180deg)scale(.7); -o-transform:rotateY(180deg)scale(.7); transform:rotateY(180deg)scale(.7); filter:alpha(opacity=0); opacity:0 } .flipped #code { -moz-transform:rotateY(0)scale(1); -webkit-transform:rotateY(0)scale(1); -o-transform:rotateY(0)scale(1); transform:rotateY(0)scale(1); filter:alpha(opacity=100); opacity:1; z-index:5; display:block } .wrapper{ width: 100px; height: 100px; position: relative; } 
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="wrapper"> <div id="settings-container">Настройки</div> <div id="code">Код</div> </div> <button>Флипнунть</button>

        • Maybe your content is too small, but I don’t see the same effect of going away like theirs. In the snippet, everything seems to turn horizontally. - Qwertiy ♦
        • @Qwertiy I am trying now, it seems the effect is the same - Andrei Dinevich