Блог

Главная - Вопросы по программированию - Как создать 3D анимированный куб

Как создать 3D анимированный куб

#css #animation #3d #css-animations

#css #Анимация #3D #css-анимация

Вопрос:

Я смотрел учебник Youtube по созданию 3d анимированного куба (разум будет прямоугольным, а не квадратным, потому что я хочу, чтобы он выглядел как dvd), но у меня это не работает. Моя цель — сделать так, чтобы 3D dvd выглядел плавающим и вращающимся. Это учебное пособие, которое я смотрел: https: //www.youtube.com/watch?v=ea4YvO8Pt0E Это страница, которую я кодирую: https://jasmines-fav-films.glitch.me

Это мой код:

HTML

 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Jasmine's Fav Films</title>

    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css" />

    <!-- import the webpage's javascript file -->
    <script src="/script.js" defer></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  </head>
  
  <body>
    <center><h1>a collection of my favorite films</h1></center>
    
    <center><h2>
      enjoy :)
    </h2></center>
  
  <!--Lady Bird-->
<div class="wrap">
  <div class="cube">
    <!--top--> <img src="https://cdn.glitch.com/a6eaa6c7-b4e8-4683-a819-2311ed0ff01e/top.jpg?v=1604625879849">
    <!--cover--><img src="https://cdn.glitch.com/a6eaa6c7-b4e8-4683-a819-2311ed0ff01e/lbcover.jpg?v=1604626841181">
    <!--spine--><img src="https://cdn.glitch.com/a6eaa6c7-b4e8-4683-a819-2311ed0ff01e/lbspine.jpg?v=1604625904326">
    <!--back--><img src="https://cdn.glitch.com/a6eaa6c7-b4e8-4683-a819-2311ed0ff01e/lbback.jpg?v=1604625885941">
    <!--side--><img src="https://cdn.glitch.com/a6eaa6c7-b4e8-4683-a819-2311ed0ff01e/side.jpg?v=1604625875017">
    <!--bottom--><img src="https://cdn.glitch.com/a6eaa6c7-b4e8-4683-a819-2311ed0ff01e/bottom.jpg?v=1604625871667">
  </div>
</div>

CSS:

 body {
  font-family: font-family: 'Abril Fatface', cursive;
  margin: 2em;
  background: #FFD0C1;
  
}

h1 {
  color: red;

wrap{
   margin-top:150px;
  perspective:1000px;
  perspective-origin: 50% 50%;
} 
  
  
  
.cube{
  transform-style:preserve-3d;
  width:210;
  height: 300px;
  margin: auto;
  position: relative;
}

.cube img {
  position: absolute;
  opacity: 0.8;
} 
  
.cube img:nth-child(1){
  
    transform:rotateY(0deg) translateZ(100px);
}

.cube img:nth-child(2) {
    transform:rotateY(90deg) translateZ(100px);
}

.cube img:nth-child(3) {
    transform:rotateY(180deg) translateZ(100px);
}
  
.cube img:nth-child(4){

    transform:rotateY(-90deg) translateZ(100px);
}
  
 .cube img:nth-child(5) {
   
    transform:rotateY(90deg) translateZ(100px);
} 
  
.cube img:nth-child(6) {
  
    transform:rotateY(-90deg) translateZ(100px);
} 
  
 
@keyframes loop{
    from(transform:rotateX(0deg) rotateY(0deg);}
    to(transform:rotateX(360deg) rotateY(360deg);}
}

.cube{
  animation:loop 10s linear infinite;
}

Ответ №1:

Недавно поиграл с этим и получил: https://jsfiddle.net/allenski/2bqm075p /

Надеюсь, это немного поможет!

Cube HTML:

 <div class="cube">
    <div class="side front">1</div>
    <div class="side back">2</div>
    <div class="side right">3</div>
    <div class="side left">4</div>
    <div class="side top">5</div>
    <div class="side bottom">6</div>
</div>

Cube CSS:

 .cube {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%) rotateX(-13deg) rotateY(-13deg);
  transform-style: preserve-3d;
  transition: all .3s ease-in;

  animation-name: rotateY-loop;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: forward;
  animation-duration: 12s;
}
.cube:hover {
  animation-play-state: paused;
}

Стороны куба обращены к CSS:

 .side {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 20px;
  color: #000;
  text-shadow: 0 0 77px #000;
  border: 1px solid #000;
  transition: all 210ms;
  cursor: pointer;
}
.side:hover {
  font-size: 70px;
  text-shadow: 0 0 7px #000;
  color: #FFF;
}
.front {
  background: rgba(90,90,90,.7);
  transform: translateZ(50px);
}
.back {
  background: rgba(0,210,0,.7);
  transform: rotateY(180deg) translateZ(50px);
}
.right {
  background: rgba(210,0,0,.7);
  transform: rotateY(90deg) translateZ(50px);
}
.left {
  background: rgba(0,0,210,.7);
  transform: rotateY(-90deg) translateZ(50px);
}
.top {
  background: rgba(210,210,0,.7);
  transform: rotateX(90deg) translateZ(50px);
}
.bottom {
  background: rgba(210,0,210,.7);
  transform: rotateX(-90deg) translateZ(50px);
}

Ключевые кадры куба CSS:

 @keyframes rotateY-loop {
    0% {
        transform: translate(-50%, -50%) rotateX(-13deg) rotateY(-13deg);
    }
    50% {
        transform: translate(-50%, -50%) rotateX(-13deg) rotateY(-193deg);
    }
    100% {
        transform: translate(-50%, -50%) rotateX(-13deg) rotateY(-373deg);
    }
}

Повеселились еще немного и получили: https://jsfiddle.net/allenski/k65p0yv1 /