Не получается стащить фичу с сайта (CSS + js) [требует правки]

169

10 июня 2017, 16:47

Собственно сайт

http://www.bestcssbuttongenerator.com/

По нажатии кнопки происходит анимация справа, которая очень понравилась.

Скачал саму страницу, файлы min.css и min.js, но ничего не сработало. Почти ничего. Если из исходника страницы удалить некоторый встроенный js то какие-то признаки жизни оно подаёт непосредственно из css

Answer 1

Вот релевантный css-код (правило для #right#right я добавил для изменения позиционирования блока, остальное неизменно). Содержимое блоков заменил скриншотами, чтобы не тащить лишний код.

$("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>

Написано довольно чисто, кроме префиксов даже поудалять почти нечего...

Answer 2

Потому что тырить надо не бездумно, а творчески. Вот как это работает:

$('#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>

Answer 3

$('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>