时间戳

首页 > 解决方案 > 如何创建 3D 动画立方体

css - 如何创建 3D 动画立方体

问题描述

我观看了一个 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%2Ftop.jpg?v=1604625879849">
    <!--cover--><img src="https://cdn.glitch.com/a6eaa6c7-b4e8-4683-a819-2311ed0ff01e%2Flbcover.jpg?v=1604626841181">
    <!--spine--><img src="https://cdn.glitch.com/a6eaa6c7-b4e8-4683-a819-2311ed0ff01e%2Flbspine.jpg?v=1604625904326">
    <!--back--><img src="https://cdn.glitch.com/a6eaa6c7-b4e8-4683-a819-2311ed0ff01e%2Flbback.jpg?v=1604625885941">
    <!--side--><img src="https://cdn.glitch.com/a6eaa6c7-b4e8-4683-a819-2311ed0ff01e%2Fside.jpg?v=1604625875017">
    <!--bottom--><img src="https://cdn.glitch.com/a6eaa6c7-b4e8-4683-a819-2311ed0ff01e%2Fbottom.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;
}

标签： cssanimation3dcss-animations

解决方案

最近在玩这个并得到：https ://jsfiddle.net/allenski/2bqm075p/

希望这有点帮助！

多维数据集 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>

立方体 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/

推荐阅读