БЛОГ НА HUSL


5 лет на Stack Overflow?

Автор вопроса: Sevastopol'

Сегодня уже 5 лет как я на Stack Overflow на русском!

введите сюда описание изображения

Спасибо тем, кто задавал вопросы, на которые у меня была возможность ответить и мои ответы оказались полезными. Спасибо всем, кто отвечал на мои вопросы и таким образом помог мне реализовать интересные проекты.

! function(t) {
  function e(e, n, i, r) {
    var a = e.text(),
      c = a.split(n),
      s = "";
    c.length && (t(c).each(function(t, e) {
      s += '<span class="' + i + (t + 1) + '" aria-hidden="true">' + e + "</span>" + r
    }), e.attr("aria-label", a).empty().append(s))
  }
  var n = {
    init: function() {
      return this.each(function() {
        e(t(this), "", "char", "")
      })
    },
    words: function() {
      return this.each(function() {
        e(t(this), " ", "word", " ")
      })
    },
    lines: function() {
      return this.each(function() {
        var n = "eefec303079ad17405c889e092e105b0";
        e(t(this).children("br").replaceWith(n).end(), n, "line", "")
      })
    }
  };
  t.fn.lettering = function(e) {
    return e && n[e] ? n[e].apply(this, [].slice.call(arguments, 1)) : "letters" !== e && e ? (t.error("Method " + e + " does not exist on jQuery.lettering"), this) : n.init.apply(this, [].slice.call(arguments, 0))
  }
}(jQuery);

$('h1').lettering();

const WIN_WIDTH = window.innerWidth;
const WIN_HEIGHT = window.innerHeight;

for (let i = 0; i < 25; i++) {
  let stack = createStack();
  document.body.appendChild(stack);
}

function createStack() {
  let stack = document.createElement('span');
  stack.classList.add('fa', 'fa-fw', 'stackoverflow');
  stack.style.position = 'absolute';
  stack.style.display = 'block';
  stack.style.top = `${Math.random() * WIN_HEIGHT}px`;
  stack.style.left = `${Math.random() * WIN_WIDTH}px`;

  return stack;
}
body {
  overflow: hidden;
  width: 100%;
  height: 100vh;
  color: #fff;
  background: #C0392B;
  background-image: radial-gradient(#E67E22, #E74C3C);
  font-family: cursive;
}

h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  font-weight: 400;
  margin: 0;
  font-size: 25px;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.profile {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -90px;
  margin-left: -104px;
  z-index: 2;
}

h1 span {
  display: inline-block;
  margin: 0 4px;
  -webkit-animation: 2s ease-in-out infinite move;
  animation: 2s ease-in-out infinite move;
}

h1 span:nth-child(1) {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

h1 span:nth-child(2) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

h1 span:nth-child(3) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

h1 span:nth-child(4) {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

h1 span:nth-child(5) {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

h1 span:nth-child(6) {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

h1 span:nth-child(7) {
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

h1 span:nth-child(8) {
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

h1 span:nth-child(9) {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}

h1 span:nth-child(10) {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

h1 span:nth-child(11) {
  -webkit-animation-delay: 1.1s;
  animation-delay: 1.1s;
}

h1 span:nth-child(12) {
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}

h1 span:nth-child(13) {
  -webkit-animation-delay: 1.3s;
  animation-delay: 1.3s;
}

h1 span:nth-child(14) {
  -webkit-animation-delay: 1.4s;
  animation-delay: 1.4s;
}

h1 span:nth-child(15) {
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}

h1 span:nth-child(16) {
  -webkit-animation-delay: 1.6s;
  animation-delay: 1.6s;
}

h1 span:nth-child(17) {
  -webkit-animation-delay: 1.7s;
  animation-delay: 1.7s;
}

h1 span:nth-child(18) {
  -webkit-animation-delay: 1.8s;
  animation-delay: 1.8s;
}

h1 span:nth-child(19) {
  -webkit-animation-delay: 1.9s;
  animation-delay: 1.9s;
}

h1 span:nth-child(20) {
  -webkit-animation-delay: 2.0s;
  animation-delay: 2.0s;
}

h1 span:nth-child(21) {
  -webkit-animation-delay: 2.1s;
  animation-delay: 2.1s;
}

h1 span:nth-child(22) {
  -webkit-animation-delay: 2.2s;
  animation-delay: 2.2s;
}

h1 span:nth-child(23) {
  -webkit-animation-delay: 2.3s;
  animation-delay: 2.3s;
}

@-webkit-keyframes move {
  50% {
    -webkit-transform: translate(0, -20px);
    transform: translate(0, -20px);
  }
}

@keyframes move {
  50% {
    -webkit-transform: translate(0, -20px);
    transform: translate(0, -20px);
  }
}

.fa {
  color: red;
  opacity: .3;
  -webkit-animation: 1s ease grow infinite;
  animation: 1s ease grow infinite;
}

.stackoverflow:before {
  content: "";
  display: block;
  width: 50px;
  height: 58px;
  background: url('https://i.imgur.com/fplpxpe.png') center center no-repeat;
  background-size: 50%;
}

body .fa:nth-child(1) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

body .fa:nth-child(2) {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

body .fa:nth-child(3) {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}

body .fa:nth-child(4) {
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}

body .fa:nth-child(5) {
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}

body .fa:nth-child(6) {
  -webkit-animation-delay: 1.8s;
  animation-delay: 1.8s;
}

body .fa:nth-child(7) {
  -webkit-animation-delay: 2.1s;
  animation-delay: 2.1s;
}

body .fa:nth-child(8) {
  -webkit-animation-delay: 2.4s;
  animation-delay: 2.4s;
}

body .fa:nth-child(9) {
  -webkit-animation-delay: 2.7s;
  animation-delay: 2.7s;
}

body .fa:nth-child(10) {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

body .fa:nth-child(11) {
  -webkit-animation-delay: 3.3s;
  animation-delay: 3.3s;
}

body .fa:nth-child(12) {
  -webkit-animation-delay: 3.6s;
  animation-delay: 3.6s;
}

body .fa:nth-child(13) {
  -webkit-animation-delay: 3.9s;
  animation-delay: 3.9s;
}

body .fa:nth-child(14) {
  -webkit-animation-delay: 4.2s;
  animation-delay: 4.2s;
}

body .fa:nth-child(15) {
  -webkit-animation-delay: 4.5s;
  animation-delay: 4.5s;
}

body .fa:nth-child(16) {
  -webkit-animation-delay: 4.8s;
  animation-delay: 4.8s;
}

body .fa:nth-child(17) {
  -webkit-animation-delay: 5.1s;
  animation-delay: 5.1s;
}

body .fa:nth-child(18) {
  -webkit-animation-delay: 5.4s;
  animation-delay: 5.4s;
}

body .fa:nth-child(19) {
  -webkit-animation-delay: 5.7s;
  animation-delay: 5.7s;
}

body .fa:nth-child(20) {
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
}

body .fa:nth-child(21) {
  -webkit-animation-delay: 6.3s;
  animation-delay: 6.3s;
}

body .fa:nth-child(22) {
  -webkit-animation-delay: 6.6s;
  animation-delay: 6.6s;
}

body .fa:nth-child(23) {
  -webkit-animation-delay: 6.9s;
  animation-delay: 6.9s;
}

body .fa:nth-child(24) {
  -webkit-animation-delay: 7.2s;
  animation-delay: 7.2s;
}

body .fa:nth-child(25) {
  -webkit-animation-delay: 7.5s;
  animation-delay: 7.5s;
}

body .fa:nth-child(26) {
  -webkit-animation-delay: 7.8s;
  animation-delay: 7.8s;
}

body .fa:nth-child(27) {
  -webkit-animation-delay: 8.1s;
  animation-delay: 8.1s;
}

body .fa:nth-child(28) {
  -webkit-animation-delay: 8.4s;
  animation-delay: 8.4s;
}

body .fa:nth-child(29) {
  -webkit-animation-delay: 8.7s;
  animation-delay: 8.7s;
}

body .fa:nth-child(30) {
  -webkit-animation-delay: 9s;
  animation-delay: 9s;
}

body .fa:nth-child(31) {
  -webkit-animation-delay: 9.3s;
  animation-delay: 9.3s;
}

body .fa:nth-child(32) {
  -webkit-animation-delay: 9.6s;
  animation-delay: 9.6s;
}

body .fa:nth-child(33) {
  -webkit-animation-delay: 9.9s;
  animation-delay: 9.9s;
}

body .fa:nth-child(34) {
  -webkit-animation-delay: 10.2s;
  animation-delay: 10.2s;
}

body .fa:nth-child(35) {
  -webkit-animation-delay: 10.5s;
  animation-delay: 10.5s;
}

body .fa:nth-child(36) {
  -webkit-animation-delay: 10.8s;
  animation-delay: 10.8s;
}

body .fa:nth-child(37) {
  -webkit-animation-delay: 11.1s;
  animation-delay: 11.1s;
}

body .fa:nth-child(38) {
  -webkit-animation-delay: 11.4s;
  animation-delay: 11.4s;
}

body .fa:nth-child(39) {
  -webkit-animation-delay: 11.7s;
  animation-delay: 11.7s;
}

body .fa:nth-child(40) {
  -webkit-animation-delay: 12s;
  animation-delay: 12s;
}

body .fa:nth-child(41) {
  -webkit-animation-delay: 12.3s;
  animation-delay: 12.3s;
}

body .fa:nth-child(42) {
  -webkit-animation-delay: 12.6s;
  animation-delay: 12.6s;
}

body .fa:nth-child(43) {
  -webkit-animation-delay: 12.9s;
  animation-delay: 12.9s;
}

body .fa:nth-child(44) {
  -webkit-animation-delay: 13.2s;
  animation-delay: 13.2s;
}

body .fa:nth-child(45) {
  -webkit-animation-delay: 13.5s;
  animation-delay: 13.5s;
}

body .fa:nth-child(46) {
  -webkit-animation-delay: 13.8s;
  animation-delay: 13.8s;
}

body .fa:nth-child(47) {
  -webkit-animation-delay: 14.1s;
  animation-delay: 14.1s;
}

body .fa:nth-child(48) {
  -webkit-animation-delay: 14.4s;
  animation-delay: 14.4s;
}

body .fa:nth-child(49) {
  -webkit-animation-delay: 14.7s;
  animation-delay: 14.7s;
}

body .fa:nth-child(50) {
  -webkit-animation-delay: 15s;
  animation-delay: 15s;
}

@-webkit-keyframes grow {
  50% {
    -webkit-transform: scale(2);
    transform: scale(2);
  }
}

@keyframes grow {
  50% {
    -webkit-transform: scale(2);
    transform: scale(2);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>5 лет на Stack Overflow</h1>
<div class="profile">
  <a href="https://ru.stackoverflow.com/users/31280/sevastopol"><img src="https://ru.stackoverflow.com/users/flair/31280.png?theme=clean" width="208" height="58"></a>
</div>

Собственно это и есть цель создания данного топика. Но, не нарушая действующие правила сообщества, задаю вопрос. Итак, вопрос следующий. Как пересчитать абсолютное позиционирование элементов .stackoverflow:before при ресайзе?


Источник

Ответы (2 шт):

Автор решения: Sevastopol'

Сегодня уже 5 лет как я на Stack Overflow на русском!

введите сюда описание изображения

Спасибо тем, кто задавал вопросы, на которые у меня была возможность ответить и мои ответы оказались полезными. Спасибо всем, кто отвечал на мои вопросы и таким образом помог мне реализовать интересные проекты.

html {
min-width: 100vw;
min-height: 100vh;
}

body {
display: table;
overflow: hidden;
width: 100vw;
height: 100vh;
font-family: cursive;
text-align: center;
animation: super-rainbow 5s infinite linear;
}

section {
display: table-cell;
vertical-align: middle;
position: relative;
}

h1 {
position: relative;
z-index: 9999;
text-transform: uppercase;
color: #FFF;
font-size: 150px;
animation: scale 3s ease-out infinite;
}

h1 span {
display: block;
font-size: 60px;
}

h1:before {
content: "";
position: absolute;
top: 50%;
width: 50%;
background: #fff;
width: 100px;
height: 100px;
z-index: 100;
margin-left: -50px;
margin-top: -50px;
filter: blur(40px);
}

.line-wrapper-1 {
transform: rotate(3.33deg);
animation: rotate1 3s linear infinite;
position: absolute;
top: 50%;
left: 50%;
}

.line-1 {
width: 110px;
height: 3px;
background-color: #f95e3d;
position: absolute;
transform: rotate(10deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-2 {
width: 160px;
height: 3px;
background-color: #c71d20;
position: absolute;
transform: rotate(20deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-3 {
width: 110px;
height: 3px;
background-color: rgba(64, 27, 69, 0.5);
position: absolute;
transform: rotate(30deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-4 {
width: 160px;
height: 3px;
background-color: #e1243d;
position: absolute;
transform: rotate(40deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-5 {
width: 110px;
height: 3px;
background-color: #806736;
position: absolute;
transform: rotate(50deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-6 {
width: 160px;
height: 3px;
background-color: rgba(41, 58, 38, 0.3203125);
position: absolute;
transform: rotate(60deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-7 {
width: 110px;
height: 3px;
background-color: #f41303;
position: absolute;
transform: rotate(70deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-8 {
width: 160px;
height: 3px;
background-color: rgba(124, 32, 17, 0.96875);
position: absolute;
transform: rotate(80deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-9 {
width: 110px;
height: 3px;
background-color: #f4264a;
position: absolute;
transform: rotate(90deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-10 {
width: 160px;
height: 3px;
background-color: rgba(50, 80, 59, 0.390625);
position: absolute;
transform: rotate(100deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-11 {
width: 110px;
height: 3px;
background-color: #c01912;
position: absolute;
transform: rotate(110deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-12 {
width: 160px;
height: 3px;
background-color: rgba(31, 19, 72, 0.2421875);
position: absolute;
transform: rotate(120deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-13 {
width: 110px;
height: 3px;
background-color: #bd1d07;
position: absolute;
transform: rotate(130deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-14 {
width: 160px;
height: 3px;
background-color: #aa3d3e;
position: absolute;
transform: rotate(140deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-15 {
width: 110px;
height: 3px;
background-color: #996a14;
position: absolute;
transform: rotate(150deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-16 {
width: 160px;
height: 3px;
background-color: rgba(86, 12, 25, 0.671875);
position: absolute;
transform: rotate(160deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-17 {
width: 110px;
height: 3px;
background-color: rgba(43, 24, 56, 0.3359375);
position: absolute;
transform: rotate(170deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-18 {
width: 160px;
height: 3px;
background-color: rgba(41, 85, 78, 0.3203125);
position: absolute;
transform: rotate(180deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-19 {
width: 110px;
height: 3px;
background-color: rgba(57, 99, 42, 0.4453125);
position: absolute;
transform: rotate(190deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-20 {
width: 160px;
height: 3px;
background-color: rgba(0, 126, 30, 0);
position: absolute;
transform: rotate(200deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-21 {
width: 110px;
height: 3px;
background-color: #e14a2b;
position: absolute;
transform: rotate(210deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-22 {
width: 160px;
height: 3px;
background-color: #8a3738;
position: absolute;
transform: rotate(220deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-23 {
width: 110px;
height: 3px;
background-color: #a14d0b;
position: absolute;
transform: rotate(230deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-24 {
width: 160px;
height: 3px;
background-color: rgba(119, 97, 65, 0.9296875);
position: absolute;
transform: rotate(240deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-25 {
width: 110px;
height: 3px;
background-color: #c73352;
position: absolute;
transform: rotate(250deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-26 {
width: 160px;
height: 3px;
background-color: rgba(61, 109, 84, 0.4765625);
position: absolute;
transform: rotate(260deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-27 {
width: 110px;
height: 3px;
background-color: #d64148;
position: absolute;
transform: rotate(270deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-28 {
width: 160px;
height: 3px;
background-color: #df6b21;
position: absolute;
transform: rotate(280deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-29 {
width: 110px;
height: 3px;
background-color: #860927;
position: absolute;
transform: rotate(290deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-30 {
width: 160px;
height: 3px;
background-color: #ed4c08;
position: absolute;
transform: rotate(300deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-31 {
width: 110px;
height: 3px;
background-color: #a11130;
position: absolute;
transform: rotate(310deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-32 {
width: 160px;
height: 3px;
background-color: #c52e06;
position: absolute;
transform: rotate(320deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-33 {
width: 110px;
height: 3px;
background-color: #b54c4b;
position: absolute;
transform: rotate(330deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-34 {
width: 160px;
height: 3px;
background-color: rgba(42, 93, 62, 0.328125);
position: absolute;
transform: rotate(340deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-35 {
width: 110px;
height: 3px;
background-color: rgba(112, 114, 78, 0.875);
position: absolute;
transform: rotate(350deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-36 {
width: 160px;
height: 3px;
background-color: #8c6316;
position: absolute;
transform: rotate(360deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-wrapper-2 {
transform: rotate(6.66deg);
animation: rotate2 6s linear infinite;
position: absolute;
top: 50%;
left: 50%;
}

.line-1 {
width: 220px;
height: 3px;
background-color: #972e3a;
position: absolute;
transform: rotate(10deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-2 {
width: 320px;
height: 3px;
background-color: #fa6a54;
position: absolute;
transform: rotate(20deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-3 {
width: 220px;
height: 3px;
background-color: #ca2123;
position: absolute;
transform: rotate(30deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-4 {
width: 320px;
height: 3px;
background-color: #f32f49;
position: absolute;
transform: rotate(40deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-5 {
width: 220px;
height: 3px;
background-color: rgba(105, 106, 67, 0.8203125);
position: absolute;
transform: rotate(50deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-6 {
width: 320px;
height: 3px;
background-color: rgba(12, 124, 56, 0.09375);
position: absolute;
transform: rotate(60deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-7 {
width: 220px;
height: 3px;
background-color: #b51829;
position: absolute;
transform: rotate(70deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-8 {
width: 320px;
height: 3px;
background-color: #ec0420;
position: absolute;
transform: rotate(80deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-9 {
width: 220px;
height: 3px;
background-color: rgba(24, 26, 34, 0.1875);
position: absolute;
transform: rotate(90deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-10 {
width: 320px;
height: 3px;
background-color: rgba(47, 112, 75, 0.3671875);
position: absolute;
transform: rotate(100deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-11 {
width: 220px;
height: 3px;
background-color: rgba(66, 124, 57, 0.515625);
position: absolute;
transform: rotate(110deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-12 {
width: 320px;
height: 3px;
background-color: rgba(20, 66, 39, 0.15625);
position: absolute;
transform: rotate(120deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-13 {
width: 220px;
height: 3px;
background-color: #d85e53;
position: absolute;
transform: rotate(130deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-14 {
width: 320px;
height: 3px;
background-color: #fe531b;
position: absolute;
transform: rotate(140deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-15 {
width: 220px;
height: 3px;
background-color: rgba(124, 89, 42, 0.96875);
position: absolute;
transform: rotate(150deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-16 {
width: 320px;
height: 3px;
background-color: #b4571e;
position: absolute;
transform: rotate(160deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-17 {
width: 220px;
height: 3px;
background-color: #8e4d07;
position: absolute;
transform: rotate(170deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-18 {
width: 320px;
height: 3px;
background-color: #f00033;
position: absolute;
transform: rotate(180deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-19 {
width: 220px;
height: 3px;
background-color: #9c2811;
position: absolute;
transform: rotate(190deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-20 {
width: 320px;
height: 3px;
background-color: rgba(88, 88, 83, 0.6875);
position: absolute;
transform: rotate(200deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-21 {
width: 220px;
height: 3px;
background-color: #b44029;
position: absolute;
transform: rotate(210deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-22 {
width: 320px;
height: 3px;
background-color: rgba(55, 5, 14, 0.4296875);
position: absolute;
transform: rotate(220deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-23 {
width: 220px;
height: 3px;
background-color: #cd0301;
position: absolute;
transform: rotate(230deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-24 {
width: 320px;
height: 3px;
background-color: rgba(77, 52, 31, 0.6015625);
position: absolute;
transform: rotate(240deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-25 {
width: 220px;
height: 3px;
background-color: #832842;
position: absolute;
transform: rotate(250deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-26 {
width: 320px;
height: 3px;
background-color: rgba(112, 111, 28, 0.875);
position: absolute;
transform: rotate(260deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-27 {
width: 220px;
height: 3px;
background-color: rgba(67, 30, 62, 0.5234375);
position: absolute;
transform: rotate(270deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-28 {
width: 320px;
height: 3px;
background-color: #d1792f;
position: absolute;
transform: rotate(280deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-29 {
width: 220px;
height: 3px;
background-color: rgba(94, 83, 78, 0.734375);
position: absolute;
transform: rotate(290deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-30 {
width: 320px;
height: 3px;
background-color: rgba(15, 86, 33, 0.1171875);
position: absolute;
transform: rotate(300deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-31 {
width: 220px;
height: 3px;
background-color: rgba(120, 2, 79, 0.9375);
position: absolute;
transform: rotate(310deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-32 {
width: 320px;
height: 3px;
background-color: rgba(87, 109, 1, 0.6796875);
position: absolute;
transform: rotate(320deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-33 {
width: 220px;
height: 3px;
background-color: #982b4a;
position: absolute;
transform: rotate(330deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-34 {
width: 320px;
height: 3px;
background-color: rgba(85, 125, 8, 0.6640625);
position: absolute;
transform: rotate(340deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-35 {
width: 220px;
height: 3px;
background-color: rgba(111, 31, 20, 0.8671875);
position: absolute;
transform: rotate(350deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-36 {
width: 320px;
height: 3px;
background-color: rgba(104, 80, 14, 0.8125);
position: absolute;
transform: rotate(360deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-wrapper-3 {
transform: rotate(9.99deg);
animation: rotate3 9s linear infinite;
position: absolute;
top: 50%;
left: 50%;
}

.line-1 {
width: 330px;
height: 3px;
background-color: rgba(108, 57, 73, 0.84375);
position: absolute;
transform: rotate(10deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-2 {
width: 480px;
height: 3px;
background-color: #b98037;
position: absolute;
transform: rotate(20deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-3 {
width: 330px;
height: 3px;
background-color: rgba(73, 80, 2, 0.5703125);
position: absolute;
transform: rotate(30deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-4 {
width: 480px;
height: 3px;
background-color: rgba(96, 57, 66, 0.75);
position: absolute;
transform: rotate(40deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-5 {
width: 330px;
height: 3px;
background-color: #c73f04;
position: absolute;
transform: rotate(50deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-6 {
width: 480px;
height: 3px;
background-color: rgba(33, 59, 80, 0.2578125);
position: absolute;
transform: rotate(60deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-7 {
width: 330px;
height: 3px;
background-color: #a44b21;
position: absolute;
transform: rotate(70deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-8 {
width: 480px;
height: 3px;
background-color: #831238;
position: absolute;
transform: rotate(80deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-9 {
width: 330px;
height: 3px;
background-color: #923d04;
position: absolute;
transform: rotate(90deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-10 {
width: 480px;
height: 3px;
background-color: #eb7123;
position: absolute;
transform: rotate(100deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-11 {
width: 330px;
height: 3px;
background-color: #d9692a;
position: absolute;
transform: rotate(110deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-12 {
width: 480px;
height: 3px;
background-color: rgba(29, 17, 2, 0.2265625);
position: absolute;
transform: rotate(120deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-13 {
width: 330px;
height: 3px;
background-color: rgba(64, 72, 55, 0.5);
position: absolute;
transform: rotate(130deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-14 {
width: 480px;
height: 3px;
background-color: rgba(44, 126, 7, 0.34375);
position: absolute;
transform: rotate(140deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-15 {
width: 330px;
height: 3px;
background-color: rgba(102, 117, 31, 0.796875);
position: absolute;
transform: rotate(150deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-16 {
width: 480px;
height: 3px;
background-color: rgba(81, 61, 58, 0.6328125);
position: absolute;
transform: rotate(160deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-17 {
width: 330px;
height: 3px;
background-color: #f93d30;
position: absolute;
transform: rotate(170deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-18 {
width: 480px;
height: 3px;
background-color: rgba(44, 61, 7, 0.34375);
position: absolute;
transform: rotate(180deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-19 {
width: 330px;
height: 3px;
background-color: rgba(105, 47, 84, 0.8203125);
position: absolute;
transform: rotate(190deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-20 {
width: 480px;
height: 3px;
background-color: rgba(73, 9, 11, 0.5703125);
position: absolute;
transform: rotate(200deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-21 {
width: 330px;
height: 3px;
background-color: #be532c;
position: absolute;
transform: rotate(210deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-22 {
width: 480px;
height: 3px;
background-color: rgba(4, 30, 73, 0.03125);
position: absolute;
transform: rotate(220deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-23 {
width: 330px;
height: 3px;
background-color: rgba(93, 128, 49, 0.7265625);
position: absolute;
transform: rotate(230deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-24 {
width: 480px;
height: 3px;
background-color: rgba(40, 47, 60, 0.3125);
position: absolute;
transform: rotate(240deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-25 {
width: 330px;
height: 3px;
background-color: #cf7345;
position: absolute;
transform: rotate(250deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-26 {
width: 480px;
height: 3px;
background-color: #d96352;
position: absolute;
transform: rotate(260deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-27 {
width: 330px;
height: 3px;
background-color: #e45815;
position: absolute;
transform: rotate(270deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-28 {
width: 480px;
height: 3px;
background-color: #b62851;
position: absolute;
transform: rotate(280deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-29 {
width: 330px;
height: 3px;
background-color: #885a0a;
position: absolute;
transform: rotate(290deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-30 {
width: 480px;
height: 3px;
background-color: #8f034f;
position: absolute;
transform: rotate(300deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-31 {
width: 330px;
height: 3px;
background-color: rgba(70, 60, 84, 0.546875);
position: absolute;
transform: rotate(310deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-32 {
width: 480px;
height: 3px;
background-color: rgba(92, 82, 67, 0.71875);
position: absolute;
transform: rotate(320deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-33 {
width: 330px;
height: 3px;
background-color: rgba(42, 39, 63, 0.328125);
position: absolute;
transform: rotate(330deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-34 {
width: 480px;
height: 3px;
background-color: rgba(27, 13, 24, 0.2109375);
position: absolute;
transform: rotate(340deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-35 {
width: 330px;
height: 3px;
background-color: #894804;
position: absolute;
transform: rotate(350deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

.line-36 {
width: 480px;
height: 3px;
background-color: rgba(91, 102, 47, 0.7109375);
position: absolute;
transform: rotate(360deg);
transform-origin: 0% 0%;
left: 50%;
top: 50%;
}

@keyframes rotate1 {
from {transform: rotate(3.33deg);}
50% {transform: rotate(184.33deg);}
to {transform: rotate(2.33deg);}
}
@keyframes rotate2 {
from {transform: rotate(359deg);}
to {transform: rotate(0deg);}
}
@keyframes rotate3 {
from {transform: rotate(180deg);}
to {transform: rotate(-180deg);}
}
@keyframes scale {
from {transform: scale(0.33);}
25% {transform: scale(0.66);}
50% {transform: scale(0.4);}
75% {transform: scale(1);}
100% {transform: scale(0.33);}
}
@keyframes super-rainbow {
0% {background: #aaff11;}
20% {background: #ffcd00;}
40% {background: #c3d74b;}
60% {background: #c3d7d7;}
80% {background: #ffc39b;}
100% {background: #aaff11;}
}
<section>
<h1><span><a href="https://ru.stackoverflow.com/users/31280/sevastopol"><img src="https://ru.stackoverflow.com/users/flair/31280.png?theme=clean" width="208" height="58"></a></span>5<span>лет на Stack Overflow</span></h1>
<div class="line-wrapper-1">
<div class="line-1"></div><div class="line-2"></div><div class="line-3"></div><div class="line-4"></div><div class="line-5"></div><div class="line-6"></div><div class="line-7"></div><div class="line-8"></div><div class="line-9"></div><div class="line-10"></div><div class="line-11"></div><div class="line-12"></div><div class="line-13"></div><div class="line-14"></div><div class="line-15"></div><div class="line-16"></div><div class="line-17"></div><div class="line-18"></div><div class="line-19"></div><div class="line-20"></div><div class="line-21"></div><div class="line-22"></div><div class="line-23"></div><div class="line-24"></div><div class="line-25"></div><div class="line-26"></div><div class="line-27"></div><div class="line-28"></div><div class="line-29"></div><div class="line-30"></div><div class="line-31"></div><div class="line-32"></div><div class="line-33"></div><div class="line-34"></div><div class="line-35"></div><div class="line-36"></div>
</div>
<div class="line-wrapper-2">
<div class="line-1"></div><div class="line-2"></div><div class="line-3"></div><div class="line-4"></div><div class="line-5"></div><div class="line-6"></div><div class="line-7"></div><div class="line-8"></div><div class="line-9"></div><div class="line-10"></div><div class="line-11"></div><div class="line-12"></div><div class="line-13"></div><div class="line-14"></div><div class="line-15"></div><div class="line-16"></div><div class="line-17"></div><div class="line-18"></div><div class="line-19"></div><div class="line-20"></div><div class="line-21"></div><div class="line-22"></div><div class="line-23"></div><div class="line-24"></div><div class="line-25"></div><div class="line-26"></div><div class="line-27"></div><div class="line-28"></div><div class="line-29"></div><div class="line-30"></div><div class="line-31"></div><div class="line-32"></div><div class="line-33"></div><div class="line-34"></div><div class="line-35"></div><div class="line-36"></div>
</div>
<div class="line-wrapper-3">
<div class="line-1"></div><div class="line-2"></div><div class="line-3"></div><div class="line-4"></div><div class="line-5"></div><div class="line-6"></div><div class="line-7"></div><div class="line-8"></div><div class="line-9"></div><div class="line-10"></div><div class="line-11"></div><div class="line-12"></div><div class="line-13"></div><div class="line-14"></div><div class="line-15"></div><div class="line-16"></div><div class="line-17"></div><div class="line-18"></div><div class="line-19"></div><div class="line-20"></div><div class="line-21"></div><div class="line-22"></div><div class="line-23"></div><div class="line-24"></div><div class="line-25"></div><div class="line-26"></div><div class="line-27"></div><div class="line-28"></div><div class="line-29"></div><div class="line-30"></div><div class="line-31"></div><div class="line-32"></div><div class="line-33"></div><div class="line-34"></div><div class="line-35"></div><div class="line-36"></div>
</div>
</section>

→ Ссылка
Автор решения: Sevastopol'

Сегодня уже 5 лет как я на Stack Overflow на русском!

введите сюда описание изображения

Спасибо тем, кто задавал вопросы, на которые у меня была возможность ответить и мои ответы оказались полезными. Спасибо всем, кто отвечал на мои вопросы и таким образом помог мне реализовать интересные проекты.

$(document).ready(function() {
  var str = "Stack_Overflow";
  var flipped = new Array(str.length).fill(true);
  setup();
  setFlipped([0, 3, 5, 8, 11]); 
  //console.log(flipped);
  function setup() {
    for (var i = 0; i < str.length; i++) {
      $(".container").append("<div class='card-container' id=" + i + ">" +
        "<div class='front card'></div>" +
        "<div class='back card'>" + str[i] + "</div>" +
        "</div>");
    }
    $(".card-container").flip({
      trigger: 'manual',
    });
  }
  $(".card-container").click(function() {
    var n = $(this).attr("id");
    flipCard(n);
    if (checkWin()) {
      setTimeout(function() {
        //alert("ok");
        $(".card__bonus-front").addClass("card__bonus-front__active");
        $(".card__bonus-back").addClass("card__bonus-back__active");
      }, 200);
    } else {
      $(".card__bonus-front").removeClass("card__bonus-front__active");
      $(".card__bonus-back").removeClass("card__bonus-back__active");
    }
  });

  function flipCard(n) {
    n--;
    if (n >= 0) {
      $("#" + n).flip('toggle');
      flipped[n] = !flipped[n];
    }
    n++;
    $("#" + n).flip('toggle');
    flipped[n] = !flipped[n];
    n++;
    if (n < str.length) {
      $("#" + n).flip('toggle');
      flipped[n] = !flipped[n];
    }
    //console.log(flipped);
  }

  function checkWin() {
    for (var i = 0; i < flipped.length; i++)
      if (flipped[i])
        return false;
    return true;
  }

  function setFlipped(ns) {  
    for (var i  = 0; i < ns.length; i++) {   
      $("#" + ns[i]).flip("toggle");   
      flipped[ns[i]] = !flipped[ns[i]];  
    } 
  }
});
//Ниже небольшой плагин товарища Nattawat Nonsung
! function(a) {
  var b = function() {
      var a, b = document.createElement("fakeelement"),
        c = {
          transition: "transitionend",
          OTransition: "oTransitionEnd",
          MozTransition: "transitionend",
          WebkitTransition: "webkitTransitionEnd"
        };
      for (a in c)
        if (void 0 !== b.style[a]) return c[a]
    },
    c = function(b, c, d) {
      this.setting = {
        axis: "y",
        reverse: !1,
        trigger: "click",
        speed: 500,
        forceHeight: !1,
        forceWidth: !1,
        autoSize: !0,
        front: ".front",
        back: ".back"
      }, this.setting = a.extend(this.setting, c), "string" != typeof c.axis || "x" !== c.axis.toLowerCase() && "y" !== c.axis.toLowerCase() || (this.setting.axis = c.axis.toLowerCase()), "boolean" == typeof c.reverse && (this.setting.reverse = c.reverse), "string" == typeof c.trigger && (this.setting.trigger = c.trigger.toLowerCase());
      var e = parseInt(c.speed);
      isNaN(e) || (this.setting.speed = e), "boolean" == typeof c.forceHeight && (this.setting.forceHeight = c.forceHeight), "boolean" == typeof c.forceWidth && (this.setting.forceWidth = c.forceWidth), "boolean" == typeof c.autoSize && (this.setting.autoSize = c.autoSize), ("string" == typeof c.front || c.front instanceof a) && (this.setting.front = c.front), ("string" == typeof c.back || c.back instanceof a) && (this.setting.back = c.back), this.element = b, this.frontElement = this.getFrontElement(), this.backElement = this.getBackElement(), this.isFlipped = !1, this.init(d)
    };
  a.extend(c.prototype, {
    flipDone: function(a) {
      var c = this;
      c.element.one(b(), function() {
        c.element.trigger("flip:done"), "function" == typeof a && a.call(c.element)
      })
    },
    flip: function(a) {
      if (!this.isFlipped) {
        this.isFlipped = !0;
        var b = "rotate" + this.setting.axis;
        this.frontElement.css({
          transform: b + (this.setting.reverse ? "(-180deg)" : "(180deg)"),
          "z-index": "0"
        }), this.backElement.css({
          transform: b + "(0deg)",
          "z-index": "1"
        }), this.flipDone(a)
      }
    },
    unflip: function(a) {
      if (this.isFlipped) {
        this.isFlipped = !1;
        var b = "rotate" + this.setting.axis;
        this.frontElement.css({
          transform: b + "(0deg)",
          "z-index": "1"
        }), this.backElement.css({
          transform: b + (this.setting.reverse ? "(180deg)" : "(-180deg)"),
          "z-index": "0"
        }), this.flipDone(a)
      }
    },
    getFrontElement: function() {
      return this.setting.front instanceof a ? this.setting.front : this.element.find(this.setting.front)
    },
    getBackElement: function() {
      return this.setting.back instanceof a ? this.setting.back : this.element.find(this.setting.back)
    },
    init: function(a) {
      var b = this,
        c = b.frontElement.add(b.backElement),
        d = "rotate" + b.setting.axis,
        e = 2 * b.element["outer" + ("rotatex" === d ? "Height" : "Width")](),
        f = {
          perspective: e,
          position: "relative"
        },
        g = {
          transform: d + "(" + (b.setting.reverse ? "180deg" : "-180deg") + ")",
          "z-index": "0",
          position: "relative"
        },
        h = {
          "backface-visibility": "hidden",
          "transform-style": "preserve-3d",
          position: "absolute",
          "z-index": "1"
        };
      b.setting.forceHeight ? c.outerHeight(b.element.height()) : b.setting.autoSize && (h.height = "100%"), b.setting.forceWidth ? c.outerWidth(b.element.width()) : b.setting.autoSize && (h.width = "100%"), (window.chrome || window.Intl && Intl.v8BreakIterator) && "CSS" in window && (f["-webkit-transform-style"] = "preserve-3d"), c.css(h).find("*").css({
        "backface-visibility": "hidden"
      }), b.element.css(f), b.backElement.css(g), setTimeout(function() {
        var d = b.setting.speed / 1e3 || .5;
        c.css({
          transition: "all " + d + "s ease-out"
        }), "function" == typeof a && a.call(b.element)
      }, 20), b.attachEvents()
    },
    clickHandler: function(b) {
      b || (b = window.event), this.element.find(a(b.target).closest('button, a, input[type="submit"]')).length || (this.isFlipped ? this.unflip() : this.flip())
    },
    hoverHandler: function() {
      var b = this;
      b.element.off("mouseleave.flip"), b.flip(), setTimeout(function() {
        b.element.on("mouseleave.flip", a.proxy(b.unflip, b)), b.element.is(":hover") || b.unflip()
      }, b.setting.speed + 150)
    },
    attachEvents: function() {
      var b = this;
      "click" === b.setting.trigger ? b.element.on(a.fn.tap ? "tap.flip" : "click.flip", a.proxy(b.clickHandler, b)) : "hover" === b.setting.trigger && (b.element.on("mouseenter.flip", a.proxy(b.hoverHandler, b)), b.element.on("mouseleave.flip", a.proxy(b.unflip, b)))
    },
    flipChanged: function(a) {
      this.element.trigger("flip:change"), "function" == typeof a && a.call(this.element)
    },
    changeSettings: function(a, b) {
      var c = this,
        d = !1;
      if (void 0 !== a.axis && c.setting.axis !== a.axis.toLowerCase() && (c.setting.axis = a.axis.toLowerCase(), d = !0), void 0 !== a.reverse && c.setting.reverse !== a.reverse && (c.setting.reverse = a.reverse, d = !0), d) {
        var e = c.frontElement.add(c.backElement),
          f = e.css(["transition-property", "transition-timing-function", "transition-duration", "transition-delay"]);
        e.css({
          transition: "none"
        });
        var g = "rotate" + c.setting.axis;
        c.isFlipped ? c.frontElement.css({
          transform: g + (c.setting.reverse ? "(-180deg)" : "(180deg)"),
          "z-index": "0"
        }) : c.backElement.css({
          transform: g + (c.setting.reverse ? "(180deg)" : "(-180deg)"),
          "z-index": "0"
        }), setTimeout(function() {
          e.css(f), c.flipChanged(b)
        }, 0)
      } else c.flipChanged(b)
    }
  }), a.fn.flip = function(b, d) {
    return "function" == typeof b && (d = b), "string" == typeof b || "boolean" == typeof b ? this.each(function() {
      var c = a(this).data("flip-model");
      "toggle" === b && (b = !c.isFlipped), b ? c.flip(d) : c.unflip(d)
    }) : this.each(function() {
      if (a(this).data("flip-model")) {
        var e = a(this).data("flip-model");
        !b || void 0 === b.axis && void 0 === b.reverse || e.changeSettings(b, d)
      } else a(this).data("flip-model", new c(a(this), b || {}, d))
    }), this
  }
}(jQuery);
* {
  margin: 0;
  padding: 0;
}

.game {
  min-width: 100%;
  min-height: 100vh;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 20px;
  background: #fbf2d4;
  background-image: radial-gradient(#ffeb8e, #fbf2d4);
  text-align: center;
  color: black;
}

h1 {
  padding: 20px 0;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-container {
  float: left;
  width: 50px;
  height: 50px;
  margin: 10px;
}

.card {
  width: 50px;
  height: 50px;
  border: 2px solid #f48024;
  border-radius: 10px;
  line-height: 50px;
  text-align: center;
  color: #fff;
}

.back {
  background-color: #f48024;
}

.front {
  background: url("https://i.imgur.com/fplpxpe.png") center center no-repeat;
  background-color: #fafafb;
  background-size: 50%;
}

.card__bonus {
  position: relative;
  overflow: hidden;
  width: 416px;
  height: 180px;
  margin: 20px auto;
  border: 2px solid #f48024;
  border-radius: 20px;
  perspective: 800px;
}

.card__bonus h2 {
  padding: 20px;
}

.card__bonus-front,
.card__bonus-back {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 20px;
  transition: 0.8s;
  backface-visibility: hidden;
}

.card__bonus-front {
  background: url("https://i.imgur.com/fplpxpe.png") center center no-repeat;
  background-color: beige;
  background-size: auto;
  z-index: 100
}

.card__bonus-back {
  opacity: 0;
  z-index: 1;
  background-color: #fafafb;
  transform: rotateY(180deg);
}

.card__bonus-front__active {
  opacity: 0;
  transform: rotateY(-180deg);
}

.card__bonus-back__active {
  opacity: 1;
  transform: rotateY(0deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="game">
  <h1>Раскрой все карты!</h1>
  <div class="container">
  </div>
  <div class="card__bonus">
    <div class="card__bonus-front"></div>
    <div class="card__bonus-back">
      <h2>5 лет на Stack Overflow</h2>
      <a href="https://ru.stackoverflow.com/users/31280/sevastopol"><img src="https://ru.stackoverflow.com/users/flair/31280.png" width="208" height="58"></a>
    </div>
  </div>
</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.