Стикеры

Разработка Стикеры

Нет прав для скачивания
Стикеры.
Обзор Обсуждение
Делаем нашу разметку:
HTML: 
<div id="stickers">

  <div class="sticker sticker-1">
    <div class="sticker-container">
      <div class="sticker-wrapper">
        <div class="sticker-clip">
          <div class="sticker-front"></div>
          <div class="sticker-back"></div>
        </div>
      </div>
    </div>
  </div>

  <div class="sticker sticker-2">
    <div class="sticker-container">
      <div class="sticker-wrapper">
        <div class="sticker-clip">
          <div class="sticker-front"></div>
          <div class="sticker-back"></div>
        </div>
      </div>
    </div>
  </div>

  <div class="sticker sticker-3">
    <div class="sticker-container">
      <div class="sticker-wrapper">
        <div class="sticker-clip">
          <div class="sticker-front"></div>
          <div class="sticker-back"></div>
        </div>
      </div>
    </div>
  </div>

  <div class="sticker sticker-4">
    <div class="sticker-container">
      <div class="sticker-wrapper">
        <div class="sticker-clip">
          <div class="sticker-front"></div>
          <div class="sticker-back"></div>
        </div>
      </div>
    </div>
  </div>

  <div class="sticker sticker-5">
    <div class="sticker-container">
      <div class="sticker-wrapper">
        <div class="sticker-clip">
          <div class="sticker-front"></div>
          <div class="sticker-back"></div>
        </div>
      </div>
    </div>
  </div>

  <div class="sticker sticker-6">
    <div class="sticker-container">
      <div class="sticker-wrapper">
        <div class="sticker-clip">
          <div class="sticker-front"></div>
          <div class="sticker-back"></div>
        </div>
      </div>
    </div>
  </div>

</div>
Пишем стиль CSS:
CSS: 
html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: sans-serif;
}

#stickers {
  background: #2c3e50;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  align-content: flex-start;
  padding: 50px;
  box-sizing: border-box;
}
#stickers .sticker {
  flex: 0 0 auto;
  margin: 50px;
  -webkit-tap-highlight-color: transparent;
}
#stickers .sticker * {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  pointer-events: none;
}
#stickers .sticker .sticker-container {
  position: relative;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
#stickers .sticker .sticker-wrapper {
  position: absolute;
  top: 0;
  left: 0;
}
#stickers .sticker .sticker-clip {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}
#stickers .sticker .sticker-front, #stickers .sticker-back {
  position: absolute;
  overflow: hidden;
  pointer-events: all;
}
#stickers .sticker .sticker-front {
  z-index: 1;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#stickers .sticker .sticker-back {
  z-index: 2;
}
#stickers .sticker .sticker-clip {
  transition: 500ms ease-in-out transform;
}
#stickers .sticker .sticker-front, #stickers .sticker .sticker-back {
  transition: 500ms ease-in-out transform;
}
#stickers .sticker-1 {
  width: 150px;
  height: 100px;
}
#stickers .sticker-1 .sticker-container {
  width: 180.2817635663px;
  height: 180.2817635663px;
  top: -40.1408817831px;
  left: -15.1408817831px;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
#stickers .sticker-1 .sticker-wrapper {
  width: 180.2817635663px;
  height: 180.2817635663px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
#stickers .sticker-1 .sticker-clip {
  width: 180.2817635663px;
  height: 180.2817635663px;
}
#stickers .sticker-1 .sticker-front, #stickers .sticker-1 .sticker-back {
  left: 15.1408817831px;
  top: 40.1408817831px;
  width: 150px;
  height: 100px;
  border-radius: 0;
}
#stickers .sticker-1 .sticker-clip {
  -webkit-transform: translateX(1.7667326358px);
          transform: translateX(1.7667326358px);
}
#stickers .sticker-1 .sticker-front {
  -webkit-transform: rotate(-45deg) translateX(-1.2492686273px) translateY(-1.2492686273px);
          transform: rotate(-45deg) translateX(-1.2492686273px) translateY(-1.2492686273px);
}
#stickers .sticker-1 .sticker-back {
  -webkit-transform: rotate(225deg) translateX(126.2291871024px) translateY(-126.2291886046px);
          transform: rotate(225deg) translateX(126.2291871024px) translateY(-126.2291886046px);
}
#stickers .sticker-1:hover .sticker-clip {
  -webkit-transform: translateX(90.1408817831px);
          transform: translateX(90.1408817831px);
}
#stickers .sticker-1:hover .sticker-front {
  -webkit-transform: rotate(-45deg) translateX(-63.739228771px) translateY(-63.739228771px);
          transform: rotate(-45deg) translateX(-63.739228771px) translateY(-63.739228771px);
}
#stickers .sticker-1:hover .sticker-back {
  -webkit-transform: rotate(225deg) translateX(63.7392278559px) translateY(-63.7392286144px);
          transform: rotate(225deg) translateX(63.7392278559px) translateY(-63.7392286144px);
}
#stickers .sticker-1 .sticker-front {
  background-color: #2ecc71;
}
#stickers .sticker-1 .sticker-back {
  background-color: #27ae60;
}
#stickers .sticker-2 {
  width: 150px;
  height: 100px;
}
#stickers .sticker-2 .sticker-container {
  width: 180.2817635663px;
  height: 180.2817635663px;
  top: -40.1408817831px;
  left: -15.1408817831px;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
#stickers .sticker-2 .sticker-wrapper {
  width: 180.2817635663px;
  height: 180.2817635663px;
  -webkit-transform: rotate(60deg);
          transform: rotate(60deg);
}
#stickers .sticker-2 .sticker-clip {
  width: 180.2817635663px;
  height: 180.2817635663px;
}
#stickers .sticker-2 .sticker-front, #stickers .sticker-2 .sticker-back {
  left: 15.1408817831px;
  top: 40.1408817831px;
  width: 150px;
  height: 100px;
  border-radius: 20px;
}
#stickers .sticker-2 .sticker-clip {
  -webkit-transform: translateX(16.5488110638px);
          transform: translateX(16.5488110638px);
}
#stickers .sticker-2 .sticker-front {
  -webkit-transform: rotate(-60deg) translateX(-8.2744055319px) translateY(-14.3316907837px);
          transform: rotate(-60deg) translateX(-8.2744055319px) translateY(-14.3316907837px);
}
#stickers .sticker-2 .sticker-back {
  -webkit-transform: rotate(240deg) translateX(81.8664694016px) translateY(-141.7968950532px);
          transform: rotate(240deg) translateX(81.8664694016px) translateY(-141.7968950532px);
}
#stickers .sticker-2:hover .sticker-clip {
  -webkit-transform: translateX(75.4224676393px);
          transform: translateX(75.4224676393px);
}
#stickers .sticker-2:hover .sticker-front {
  -webkit-transform: rotate(-60deg) translateX(-37.7112338196px) translateY(-65.3177729917px);
          transform: rotate(-60deg) translateX(-37.7112338196px) translateY(-65.3177729917px);
}
#stickers .sticker-2:hover .sticker-back {
  -webkit-transform: rotate(240deg) translateX(52.4296435768px) translateY(-90.8108132948px);
          transform: rotate(240deg) translateX(52.4296435768px) translateY(-90.8108132948px);
}
#stickers .sticker-2 .sticker-front {
  background-color: #3498db;
}
#stickers .sticker-2 .sticker-back {
  background-color: #2980b9;
}
#stickers .sticker-3 {
  width: 120px;
  height: 120px;
}
#stickers .sticker-3 .sticker-container {
  width: 169.7075756307px;
  height: 169.7075756307px;
  top: -24.8537878154px;
  left: -24.8537878154px;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
#stickers .sticker-3 .sticker-wrapper {
  width: 169.7075756307px;
  height: 169.7075756307px;
  -webkit-transform: rotate(120deg);
          transform: rotate(120deg);
}
#stickers .sticker-3 .sticker-clip {
  width: 169.7075756307px;
  height: 169.7075756307px;
}
#stickers .sticker-3 .sticker-front, #stickers .sticker-3 .sticker-back {
  left: 24.8537878154px;
  top: 24.8537878154px;
  width: 120px;
  height: 120px;
  border-radius: 0px;
}
#stickers .sticker-3 .sticker-clip {
  -webkit-transform: translateX(2.9093358225px);
          transform: translateX(2.9093358225px);
}
#stickers .sticker-3 .sticker-front {
  -webkit-transform: rotate(-120deg) translateX(1.4546679112px) translateY(-2.5195587304px);
          transform: rotate(-120deg) translateX(1.4546679112px) translateY(-2.5195587304px);
}
#stickers .sticker-3 .sticker-back {
  -webkit-transform: rotate(300deg) translateX(-83.4000492847px) translateY(-144.4513005883px);
          transform: rotate(300deg) translateX(-83.4000492847px) translateY(-144.4513005883px);
}
#stickers .sticker-3:hover .sticker-clip {
  -webkit-transform: translateX(35.6871166196px);
          transform: translateX(35.6871166196px);
}
#stickers .sticker-3:hover .sticker-front {
  -webkit-transform: rotate(-120deg) translateX(17.8435583098px) translateY(-30.9059495804px);
          transform: rotate(-120deg) translateX(17.8435583098px) translateY(-30.9059495804px);
}
#stickers .sticker-3:hover .sticker-back {
  -webkit-transform: rotate(300deg) translateX(-67.0109762521px) translateY(-116.0649514758px);
          transform: rotate(300deg) translateX(-67.0109762521px) translateY(-116.0649514758px);
}
#stickers .sticker-3 .sticker-front {
  background-color: #9b59b6;
}
#stickers .sticker-3 .sticker-back {
  background-color: #8e44ad;
}
#stickers .sticker-4 {
  width: 120px;
  height: 120px;
}
#stickers .sticker-4 .sticker-container {
  width: 169.7075756307px;
  height: 169.7075756307px;
  top: -24.8537878154px;
  left: -24.8537878154px;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
#stickers .sticker-4 .sticker-wrapper {
  width: 169.7075756307px;
  height: 169.7075756307px;
  -webkit-transform: rotate(120deg);
          transform: rotate(120deg);
}
#stickers .sticker-4 .sticker-clip {
  width: 169.7075756307px;
  height: 169.7075756307px;
}
#stickers .sticker-4 .sticker-front, #stickers .sticker-4 .sticker-back {
  left: 24.8537878154px;
  top: 24.8537878154px;
  width: 120px;
  height: 120px;
  border-radius: 60px;
}
#stickers .sticker-4 .sticker-clip {
  -webkit-transform: translateX(24.4325038789px);
          transform: translateX(24.4325038789px);
}
#stickers .sticker-4 .sticker-front {
  -webkit-transform: rotate(-120deg) translateX(12.2162519394px) translateY(-21.1591690372px);
          transform: rotate(-120deg) translateX(12.2162519394px) translateY(-21.1591690372px);
}
#stickers .sticker-4 .sticker-back {
  -webkit-transform: rotate(300deg) translateX(-72.6383453319px) translateY(-125.811717688px);
          transform: rotate(300deg) translateX(-72.6383453319px) translateY(-125.811717688px);
}
#stickers .sticker-4:hover .sticker-clip {
  -webkit-transform: translateX(121.1065581772px);
          transform: translateX(121.1065581772px);
}
#stickers .sticker-4:hover .sticker-front {
  -webkit-transform: rotate(-120deg) translateX(60.5532790886px) translateY(-104.8813559464px);
          transform: rotate(-120deg) translateX(60.5532790886px) translateY(-104.8813559464px);
}
#stickers .sticker-4:hover .sticker-back {
  -webkit-transform: rotate(300deg) translateX(-24.300779526px) translateY(-42.0896538785px);
          transform: rotate(300deg) translateX(-24.300779526px) translateY(-42.0896538785px);
}
#stickers .sticker-4 .sticker-front {
  background-color: #e74c3c;
}
#stickers .sticker-4 .sticker-back {
  background-color: #c0392b;
}
#stickers .sticker-5 {
  width: 100px;
  height: 150px;
}
#stickers .sticker-5 .sticker-container {
  width: 180.2817635663px;
  height: 180.2817635663px;
  top: -15.1408817831px;
  left: -40.1408817831px;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
#stickers .sticker-5 .sticker-wrapper {
  width: 180.2817635663px;
  height: 180.2817635663px;
  -webkit-transform: rotate(-20deg);
          transform: rotate(-20deg);
}
#stickers .sticker-5 .sticker-clip {
  width: 180.2817635663px;
  height: 180.2817635663px;
}
#stickers .sticker-5 .sticker-front, #stickers .sticker-5 .sticker-back {
  left: 40.1408817831px;
  top: 15.1408817831px;
  width: 100px;
  height: 150px;
  border-radius: 0px;
}
#stickers .sticker-5 .sticker-clip {
  -webkit-transform: translateX(17.5520543164px);
          transform: translateX(17.5520543164px);
}
#stickers .sticker-5 .sticker-front {
  -webkit-transform: rotate(20deg) translateX(-16.4935359208px) translateY(6.003156133px);
          transform: rotate(20deg) translateX(-16.4935359208px) translateY(6.003156133px);
}
#stickers .sticker-5 .sticker-back {
  -webkit-transform: rotate(160deg) translateX(152.9159069638px) translateY(55.6568384811px);
          transform: rotate(160deg) translateX(152.9159069638px) translateY(55.6568384811px);
}
#stickers .sticker-5:hover .sticker-clip {
  -webkit-transform: translateX(90.1408817831px);
          transform: translateX(90.1408817831px);
}
#stickers .sticker-5:hover .sticker-front {
  -webkit-transform: rotate(20deg) translateX(-84.7047214427px) translateY(30.829997307px);
          transform: rotate(20deg) translateX(-84.7047214427px) translateY(30.829997307px);
}
#stickers .sticker-5:hover .sticker-back {
  -webkit-transform: rotate(160deg) translateX(84.7047214422px) translateY(30.829997307px);
          transform: rotate(160deg) translateX(84.7047214422px) translateY(30.829997307px);
}
#stickers .sticker-5 .sticker-front {
  background-color: #1abc9c;
}
#stickers .sticker-5 .sticker-back {
  background-color: #16a085;
}
#stickers .sticker-6 {
  width: 100px;
  height: 150px;
}
#stickers .sticker-6 .sticker-container {
  width: 180.2817635663px;
  height: 180.2817635663px;
  top: -15.1408817831px;
  left: -40.1408817831px;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
#stickers .sticker-6 .sticker-wrapper {
  width: 180.2817635663px;
  height: 180.2817635663px;
  -webkit-transform: rotate(10deg);
          transform: rotate(10deg);
}
#stickers .sticker-6 .sticker-clip {
  width: 180.2817635663px;
  height: 180.2817635663px;
}
#stickers .sticker-6 .sticker-front, #stickers .sticker-6 .sticker-back {
  left: 40.1408817831px;
  top: 15.1408817831px;
  width: 100px;
  height: 150px;
  border-radius: 50px;
}
#stickers .sticker-6 .sticker-clip {
  -webkit-transform: translateX(35.0187308105px);
          transform: translateX(35.0187308105px);
}
#stickers .sticker-6 .sticker-front {
  -webkit-transform: rotate(-10deg) translateX(-34.4867176029px) translateY(-6.0809387895px);
          transform: rotate(-10deg) translateX(-34.4867176029px) translateY(-6.0809387895px);
}
#stickers .sticker-6 .sticker-back {
  -webkit-transform: rotate(190deg) translateX(143.0561608479px) translateY(-25.2246609152px);
          transform: rotate(190deg) translateX(143.0561608479px) translateY(-25.2246609152px);
}
#stickers .sticker-6:hover .sticker-clip {
  -webkit-transform: translateX(123.2141723667px);
          transform: translateX(123.2141723667px);
}
#stickers .sticker-6:hover .sticker-front {
  -webkit-transform: rotate(-10deg) translateX(-121.3422722277px) translateY(-21.3959164942px);
          transform: rotate(-10deg) translateX(-121.3422722277px) translateY(-21.3959164942px);
}
#stickers .sticker-6:hover .sticker-back {
  -webkit-transform: rotate(190deg) translateX(56.2006062449px) translateY(-9.9096832136px);
          transform: rotate(190deg) translateX(56.2006062449px) translateY(-9.9096832136px);
}
#stickers .sticker-6 .sticker-front {
  background-color: #f1c40f;
}
#stickers .sticker-6 .sticker-back {
  background-color: #f39c12;
}
Пишем jquery:
JavaScript: 
const stickers = document.querySelector('#stickers');
const sticker  = stickers.querySelectorAll('.sticker');

if ('ontouchstart' in window) {

  stickers.classList.add('touch');

  for (var i = 0; i < sticker.length; i++) {
    sticker[i].onclick = function() {
      for (var j =0; j < sticker.length; j++) {
        sticker[j].classList.remove('peeled');
      }
      this.classList.add('peeled');
    };
  }

} else {

  stickers.classList.add('hover');

}
Получается такой результат:
14047
Автор
baltun
Скачиваний
0
Просмотры
641
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0
Обсудить ресурс

Ещё ресурсы от baltun

Назад
Верх Низ