Анимированный 3D куб с изображением на CSS - Форум

Новые сообщения
Участники
Правила форума
Поиск
RSS

Страница 1 из 1
1

Анимированный 3D куб с изображением на CSS (3D-преобразования для 3D куба с красивой анимацией)

Анимированный 3D куб с изображением на CSS

Kosten

Суббота, 23 Мая 2020, 20:06 | Сообщение 1

Администраторы

Сообщений:44490

Награды: 70

« 557 »

Здесь представлено два варианта 3D куба, которые отлично подойдет на современный дизайн сайта. Так как при клике навигации, что идет выше, вы самостоятельно можете управлять всеми сторонами, это в тот момент, если вам нужно показать именно ту сторону, что будет впереди. Где дополнительный стиль добавляется в демонстрационную версию, а преобразование применяется при наведении, чтобы просмотреть всех граней куба.

HTML

Код

<div class="wrapper">

  <input type="radio" name="rotate-switches" id="rotate" checked class="rotate">
  <label for="rotate" class="rotate-label">Auto</label>

  <input type="radio" name="rotate-switches" id="front" class="rotate">
  <label for="front" class="rotate-label">Front</label>

  <input type="radio" name="rotate-switches" id="left" class="rotate">
  <label for="left" class="rotate-label">Left</label>

  <input type="radio" name="rotate-switches" id="back" class="rotate">
  <label for="back" class="rotate-label">Back</label>

  <input type="radio" name="rotate-switches" id="right" class="rotate">
  <label for="right" class="rotate-label">Right</label>

  <input type="radio" name="rotate-switches" id="top" class="rotate">
  <label for="top" class="rotate-label">Top</label>

  <input type="radio" name="rotate-switches" id="bottom" class="rotate">
  <label for="bottom" class="rotate-label">Bottom</label>

  <div class="perspective">

    <div class="cube">
      <div class="front">
        <img src="Ссылка на изображение">
      </div>
      <div class="back">
       <img src="Ссылка на изображение">
      </div>
      <div class="top">
       <img src="Ссылка на изображение">
      </div>
      <div class="bottom">
       <img src="Ссылка на изображение">
      </div>
      <div class="left">
        <img src="Ссылка на изображение">
      </div>
      <div class="right">
        <img src="Ссылка на изображение">
      </div>
    </div>

  </div>

</div>

CSS

Код

.wrapper {
  max-width: 50rem;
  width: 100%;
  margin: 1rem auto;
  text-align: center;
  z-index: -1;
}
.rotate {
  display: none;
}
.rotate-label {
  display: inline-block;
  margin-left: 0.5rem;
  background: #2980b9;
  color: #fff;
  border-radius: 0.5rem;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  transition: all 0.25s;
}
.rotate:checked + .rotate-label {
  background: #3498db;
}
.perspective {
  position: relative;
  z-index: -1;
  perspective: 2000px;
  perspective-origin: 25rem -150px;
}
.cube {
  position: relative;
  width: 400px;
  margin: 3.5rem auto;
  transform-style: preserve-3d;
  transition: all 0.5s;
}
.cube div {
  position: absolute;
  width: 400px;
  height: 400px;
  opacity: 0.95;
}
.cube img {
  max-height: 100%;
  max-width: 100%;
}
#rotate:checked ~ .perspective > .cube {
  animation: rotate 10s infinite linear;
}
#front:checked ~ .perspective > .cube {
  transform: rotateX(0deg) rotateY(0deg);
  animation: none;
}
#left:checked ~ .perspective > .cube {
  transform: rotateX(0deg) rotateY(90deg);
  animation: none;
}
#back:checked ~ .perspective > .cube {
  transform: rotateX(0deg) rotateY(180deg);
  animation: none;
}
#right:checked ~ .perspective > .cube {
  transform: rotateX(0deg) rotateY(270deg);
  animation: none;
}
#top:checked ~ .perspective > .cube {
  transform: rotateX(-90deg) rotateY(0) translateZ(200px) translateY(-200px);
  animation: none;
}
#bottom:checked ~ .perspective > .cube {
  transform: rotateX(90deg) rotateY(0) translateZ(-200px) translateY(-200px);
  animation: none;
}
.front {
  transform: translateZ(200px);
}
.back {
  transform: translateZ(-200px) rotateY(180deg);
}
.left {
  transform: rotateY(270deg) translateX(-200px);
  transform-origin: center left;
}
.right {
  transform: rotateY(-270deg) translateX(200px);
  transform-origin: top right;
}
.top {
  transform: rotateX(90deg) translateY(-200px);
  transform-origin: top center;
}
.bottom {
  transform: rotateX(-90deg) translateY(200px);
  transform-origin: bottom center;
}
@keyframes rotate {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

При наведении курсора он вращается между моей картинкой и ссылкой на сайт. При этом я подумал, почему бы не расширить идею в полный куб, который можно использовать в качестве галереи изображений.

Демонстрация

Анимированный 3D куб с навигацией при наведение курсора

HTML

Код

CSS

Код

.container{
    width:200px;
    height:200px;
    top:50%;
    left:50%;
    perspective:100%;
    transform:translate(-50%,-50%)
    }

.box{
    width:100px;
    height:100px;
    bottom:25px;
    left:50px;
    cursor:pointer;
    transform-style:preserve-3d;
    transform:rotateY(-45deg) rotateX(-15deg) rotate(15deg)
    }

.box [class*="side_"]{width:100%;height:100%}

.box [class*="side_"]:not(.side_top),
.side_top div
    {background:linear-gradient(90deg,#d31027,#ea384d)}

.side_top
    {transform-style:preserve-3d;transform:rotateX(90deg) translate3d(0,0,50px)}

.side_right{transform:rotateY(90deg) translate3d(0,0,50px)}
.side_front{transform:translate3d(0,0,50px)}
.side_back{transform:rotateY(180deg) translate3d(0,0,50px)}
.side_bottom{transform:rotateX(-90deg) translate3d(0,0,50px)}
.side_left{transform:rotateY(-90deg) translate3d(0,0,50px)}

.cover_top{
    width:100px;
    height:50px;
    top:0;
    z-index:1;
    transition:all .2s 1.4s ease;
    transform:rotateX(0deg);
    transform-origin:center top
    }

.cover_right{
    width:50px;
    height:100px;
    right:0;
    transition:all .2s 1.2s ease;
    transform:rotateY(0deg);
    transform-origin:center right
    }

.cover_bottom{
    width:100px;
    height:50px;
    bottom:0;
    z-index:1;
    transition:all .2s 1s ease;
    transform:rotateX(0deg);
    transform-origin:center bottom
    }

.cover_left{
    width:50px;
    height:100px;
    left:0;
    transition:all .2s .8s ease;
    transform:rotateY(0deg);
    transform-origin:center left
    }

[class*="marquee"]{
    width:105px;
    height:50%;
    top:50%;
    overflow:hidden;
    white-space:nowrap
    }

.marquee_right
    {left:0;transform-origin:left;transform:perspective(1000px) rotateY(15deg) translate(0,-50%)}

.marquee_front
    {right:0;transform-origin:right;transform:perspective(1000px) rotateY(-15deg) translate(0,-50%)}

[class*="text"]
    {right:-150%;font-size:20px;line-height:2.5}

.text_right
    {color:#fff;text-shadow:1px 1px #000;animation:marquee 5s linear infinite}

.text_front
    {color:#000;text-shadow:1px 1px #fff;animation:marquee 5s 1.7s linear infinite}

@keyframes marquee
    {from{right:-150%}to{right:150%}}

.side_front:before,
.cover_top:before,
.cover_bottom:before{
    background-color:transparent;
    background-image:
    linear-gradient(90deg,#fd3352 100%,rgba(0,0,0,0)),
    linear-gradient(90deg,#ffc93b 100%,rgba(0,0,0,0)),
    linear-gradient(90deg,#63c486 100%,rgba(0,0,0,0)),
    linear-gradient(90deg,#4690ff 100%,rgba(0,0,0,0));
    background-position:5px top,10px top,15px top,20px top;
    background-repeat:no-repeat;
    background-size:5px 100%;
    width:100%;
    height:100%;
    display:block;
    position:absolute;
    content:""
    }

.nav
    {width:100%;height:100%;transform:rotateY(45deg) rotateX(15deg) rotate(-75deg)}

.menu{
    width:32px;
    height:100%;
    top:-60px;
    left:70px;
    transform-origin:bottom center
    }

.menu:nth-child(1){transform:rotate(30deg)}
.menu:nth-child(2){transform:rotate(60deg)}
.menu:nth-child(3){transform:rotate(90deg)}
.menu:nth-child(4){transform:rotate(120deg)}

.menu:before{
    width:32px;
    height:32px;
    top:100%;
    display:block;
    position:absolute;
    content:"";
    border-radius:50%
    }

.menu:nth-child(1):before{background:url('https://image.flaticon.com/icons/svg/185/185981.svg');transition:all .2s .6s ease}

.menu:nth-child(2):before{background:url('https://image.flaticon.com/icons/svg/185/185961.svg');transition:all .2s .4s ease}

.menu:nth-child(3):before{background:url('https://image.flaticon.com/icons/svg/185/185985.svg');transition:all .2s .2s ease}

.menu:nth-child(4):before{background:url('https://image.flaticon.com/icons/svg/185/185988.svg');transition:all .2s ease}

.box:hover .cover_top{transition:all .2s ease;transform:rotateX(180deg)}

.box:hover .cover_right{transition:all .2s .2s ease;transform:rotateY(180deg)}

.box:hover .cover_bottom{transition:all .2s .4s ease;transform:rotateX(-180deg)}

.box:hover .cover_left{transition:all .2s .6s ease;transform:rotateY(-180deg)}

.box:hover .menu:before{top:0}
.box:hover .menu:nth-child(1):before{transition:all .2s .8s ease}
.box:hover .menu:nth-child(2):before{transition:all .2s 1s ease}
.box:hover .menu:nth-child(3):before{transition:all .2s 1.2s ease}
.box:hover .menu:nth-child(4):before{transition:all .2s 1.4s ease}

Здесь В HTML-файле у нас есть родительский div с идентификатором оболочки и дочерний div с классом куба . И наконец, у нас есть шесть дочерних элементов div, которые представляют 6 фаз куба.

Демонстрация

Прикрепления: 0418970.jpg (34.2 Kb) · 3261864.png (37.3 Kb) · 0867191.rar (7.0 Kb)

Страна: (RU)

Kosten

Пятница, 29 Мая 2020, 21:17 | Сообщение 2

Администраторы

Сообщений:44490

Награды: 70

« 557 »

3D куб CSS анимация

HTML

Код

<html lang=" ">
    <head>
    <meta charset="utf-8">
    <title>3dCube</title>
    <link rel="stylesheet" href="3dCube.css">
    </head>
<body>
    <div class="scene">
     <div class="cube">
     <div class="cube__face cube__face--front show-front"></div>
     <div class="cube__face cube__face--back  show-back"></div>
     <div class="cube__face cube__face--right show-right"></div>
     <div class="cube__face cube__face--left  show-left"></div>
     </div>
    </div>
</body>
</html>

CSS

Код

.scene {
  position: absolute;
  width: 200px;
  height: 200px;
  perspective: 600px;
  margin-left: calc(50% - 100px);
  margin-top: 150px;
}

.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  animation: rotate 6s cubic-bezier(.64,.17,.46,.93) infinite;
}

@keyframes rotate {
  0%  { transform: rotateY(0deg)   rotateZ(0deg)  rotateX(0deg); }
  25% { transform: rotateY(90deg)  rotateZ(15deg) rotateX(15deg); }
  25% { transform: rotateY(90deg)  rotateZ(15deg) rotateX(15deg); }
  50% { transform: rotateY(180deg) rotateZ(0deg)  rotateX(0deg); }
  50% { transform: rotateY(180deg) rotateZ(0deg)  rotateX(0deg); }
  75% { transform: rotateY(270deg) rotateZ(15deg) rotateX(15deg); }
  75% { transform: rotateY(270deg) rotateZ(15deg) rotateX(15deg); }
  100%{ transform: rotateY(360deg) rotateZ(0deg)  rotateX(0deg); }
}

.cube__face {
    width: inherit;
    height: inherit;
    border: 5px solid #0f1a23;
    position: absolute;
}
.cube__face--front  {
    background: rgba(233, 194, 30, 0.2) url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Instagram_icon.png/599px-Instagram_icon.png) center / 50% no-repeat;
    transform: rotateY(  0deg) translateZ(100px); }
.cube__face--right  {
    background: rgba(248, 250, 251, 0.2) url(https://facebookbrand.com/wp-content/uploads/2018/08/thumb1.png?w=500&h=482) center / 50% no-repeat;
    transform: rotateY( 90deg) translateZ(100px); }
.cube__face--back   {
    background: rgba(255, 0, 0, .2) url(https://www.aretaeio.com/wp-content/uploads/2017/05/play-icon.png) center / 50% no-repeat;
    transform: rotateY(180deg) translateZ(100px); }
.cube__face--left   {
    background: rgba(33, 150, 243, .2) url(https://cdn.worldvectorlogo.com/logos/twitter-4.svg) center / 50% no-repeat;
    transform: rotateY(-90deg) translateZ(100px);
}

See the Pen
3D cube CSS animation by Kocsten (@kocsten)
on CodePen.