如何使用CSS动画创建一个多维数据集的开口如图所示？ [英] How to use CSS animations to create a cube's opening like in the picture?

查看：203
本文介绍了如何使用CSS动画创建一个多维数据集的开口如图所示？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在我的项目中，当主页打开时，它应该运行一个CSS动画，以便立方体的面孔打开。动画完成后，脸部应该如图所示（我需要一个 结果，如图片中的第一个开头）。





这是我的代码，



> 

  .sk-folding-cube {margin：20px auto; width：40px; height：40px; position：relative;}。sk-folding-cube .sk-cube {float：left; width：50％;身高：50％;位置：相对; -webkit-transform：scale（1.1）; -ms-transform：scale（1.1）; transform：scale（1.1）;}。sk-folding-cube .sk-cube：before {content：''; position：absolute; top：0; left：0; width：100％;高度：100％; background-color：＃000000; -webkit-animation：sk-foldCubeAngle 2.4s 0.5 linear both;动画：sk-foldCubeAngle 2.4s 0.5线性; -webkit-transform-origin：100％100％; -ms-transform-origin：100％100％; transform-origin：100％100％;}。sk-folding-cube .sk-cube2 {-webkit-transform：scale（1.1）rotateZ（90deg）; transform（1.1）rotateZ（90deg）;}。sk-folding-cube .sk-cube3 {-webkit-transform：scale（1.1）rotateZ transform（1.1）rotateZ（180deg）;}。sk-folding-cube .sk-cube4 {-webkit-transform：scale（1.1）rotateZ transform（1.1）rotateZ（270deg）;}。sk-folding-cube .sk-cube5 {-webkit-transform：scale（1.1） transform（1.1）rotateZ（360deg）;}。sk-folding-cube .sk-cube5 {-webkit-transform：scale（1.1）rotateZ transform：scale（1.1）rotateZ（360deg）;}。sk-folding-cube .sk-cube2：before {-webkit-animation-delay：0.3s; animation-delay：0.3s;}。sk-folding-cube .sk-cube3：before {-webkit-animation-delay：0.6s; animation-delay：0.6s;}。sk-folding-cube .sk-cube4：before {-webkit-animation-delay：0.9s; animation-delay：0.9s;}。sk-folding-cube .sk-cube5：before {-webkit-animation-delay：1.2s; animation-delay：1.2s;}。sk-folding-cube .sk-cube6：before {-webkit-animation-delay：1.5s; animation-delay：1.5s;} @  -  webkit-keyframes sk-foldCubeAngle {0％，10％{-webkit-transform：perspective（140px）rotateX（-180deg）; transform：perspective（140px）rotateX（-180deg）;不透明度：0; } 25％，75％{-webkit-transform：perspective（140px）rotateX（0deg）; transform：perspective（140px）rotateX（0deg）;不透明度：1; } 90％，100％{-webkit-transform：perspective（140px）rotateY（180deg）; transform：perspective（140px）rotateY（180deg）;不透明度：0; }} @ keyframes sk-foldCubeAngle {0％，10％{-webkit-transform：perspective（140px）rotateX（-180deg）; transform：perspective（140px）rotateX（-180deg）;不透明度：0; } 25％，75％{-webkit-transform：perspective（140px）rotateX（0deg）; transform：perspective（140px）rotateX（0deg）;不透明度：1; } 90％，100％{-webkit-transform：perspective（140px）rotateY（180deg）; transform：perspective（140px）rotateY（180deg）;不透明度：0; }}  

 < html>< head& < link href =style.css =stylesheet> < title>打开多维数据集< / title> < h1> Apertura Cubo< / h1>< / head>< body> < div class =sk-folding-cube> < a href =http://google.com>< div class =sk-cube1 sk-cube>< / div>< / a> < div class =sk-cube2 sk-cube>< / div> < div class =sk-cube4 sk-cube>< / div> < div class =sk-cube3 sk-cube>< / div> < / div>< / body>< / html>

$ p

解决方案

根据描述，代码段和提供的图片，尝试创建一个平面的立方体打开动画，其中立方体的每个面都逐个打开，并以图片中的第一个示例所示的外观结束。



它可能可以通过增强您当前的代码来实现这一效果，但我发现它有点混乱，所以随着我自己的版本的平面立方体。



说明：




  • 具有六个面（每个面的一个 div 元素）。我已将前面作为左面元素的子元素，因为前面最终会在左 face。

  • 每个面都是一个50 x 50像素的正方形，其变换和 / code>属性以创建多维数据集的方式进行设置。

  • 打开动画随后附加到每个面，并添加延迟，取决于每个面应该打开。在演示中，右面首先打开，因此没有延迟，下面第二个打开，因此它的延迟为1s时间的正确面部），顶部面部被打开第三，因此具有2s的延迟（等于前面两个面部的组合动画时间）等等。

  • 面没有附加任何动画，因为它根本不需要打开;）



      •   .cube {position：relative; margin：100px; transform-style：preserve-3d;}。 height：50px; width：50px; transform-style：preserve-3d;}。back {background：rebeccapurple;}。right {background：tomato; transform：rotateY（90deg）; transform-origin：right; animation：open-y 1s ease-in-out forward;}。bottom {background：crimson; transform：rotateX（270deg）; transform-origin：bottom; animation：open-x 1s 1s ease-in-out forward;}。top {background：indianred; transform：rotateX（90deg）; transform-origin：top; animation：open-x 1s 2s ease-in-out forward;}。left {background：yellowgreen; transform：rotateY（270deg）; transform-origin：left; animation：open-y 1s 3s ease-in-out forward;}。front {background：chocolate; transform：rotateY（270deg）; transform-origin：right; animation：open-y 1s 3s ease-in-out forward;} @ keyframes open-y {to {transform：rotateY（180deg）; }} @ keyframes open-x {to {transform：rotateX（180deg）; }}  

       < div class =cube < div class =back>< / div> < div class =right>< / div> < div class =bottom>< / div> < div class =top>< / div> < div class =left> < div class =front>< / div> < / div>< / div>



      注意：这是非常有可能在其他方式实现类似的效果，另外，使他们看起来更多的现实，但很可能涉及到大量的平移变换，额外的关键帧设置的动画等 - 简而言之，更复杂的代码。


      In my project, when the homepage is opened, it should run a CSS animation so that the cube's faces open. After the animation is complete the faces should be like in the picture (I need to have a result like the first opening in the picture).

      This is my code,

      .sk-folding-cube {
  margin: 20px auto;
  width: 40px;
  height: 40px;
  position: relative;
}
.sk-folding-cube .sk-cube {
  float: left;
  width: 50%;
  height: 50%;
  position: relative;
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
.sk-folding-cube .sk-cube:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  -webkit-animation: sk-foldCubeAngle 2.4s 0.5 linear both;
  animation: sk-foldCubeAngle 2.4s 0.5 linear both;
  -webkit-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}
.sk-folding-cube .sk-cube2 {
  -webkit-transform: scale(1.1) rotateZ(90deg);
  transform: scale(1.1) rotateZ(90deg);
}
.sk-folding-cube .sk-cube3 {
  -webkit-transform: scale(1.1) rotateZ(180deg);
  transform: scale(1.1) rotateZ(180deg);
}
.sk-folding-cube .sk-cube4 {
  -webkit-transform: scale(1.1) rotateZ(270deg);
  transform: scale(1.1) rotateZ(270deg);
}
.sk-folding-cube .sk-cube5 {
  -webkit-transform: scale(1.1) rotateZ(360deg);
  transform: scale(1.1) rotateZ(360deg);
}
.sk-folding-cube .sk-cube5 {
  -webkit-transform: scale(1.1) rotateZ(360deg);
  transform: scale(1.1) rotateZ(360deg);
}
.sk-folding-cube .sk-cube2:before {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
.sk-folding-cube .sk-cube3:before {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}
.sk-folding-cube .sk-cube4:before {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}
.sk-folding-cube .sk-cube5:before {
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}
.sk-folding-cube .sk-cube6:before {
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
@-webkit-keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
    transform: perspective(140px) rotateX(-180deg);
    opacity: 0;
  }
  25%,
  75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
    transform: perspective(140px) rotateX(0deg);
    opacity: 1;
  }
  90%,
  100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
    transform: perspective(140px) rotateY(180deg);
    opacity: 0;
  }
}
@keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
    transform: perspective(140px) rotateX(-180deg);
    opacity: 0;
  }
  25%,
  75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
    transform: perspective(140px) rotateX(0deg);
    opacity: 1;
  }
  90%,
  100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
    transform: perspective(140px) rotateY(180deg);
    opacity: 0;
  }
}

      <html>

<head>
  <link href="style.css" rel="stylesheet">
  <title>Open Cube</title>
  <h1>Apertura Cubo</h1>
</head>

<body>
  <div class="sk-folding-cube">
    <a href="http://google.com"><div class="sk-cube1 sk-cube"></div></a>
    <div class="sk-cube2 sk-cube"></div>
    <div class="sk-cube4 sk-cube"></div>
    <div class="sk-cube3 sk-cube"></div>
  </div>
</body>

</html>

      How can I do this?

      解决方案

      Judging by the description, snippet and the picture provided in question it seems like you are trying to create a flat cube opening animation where each face of the cube opens one by one and ends up with the appearance as shown in the first sample within the picture.

      It might be possible to achieve that effect by enhancing your current code but I found it a bit confusing and so went with my own version of a flat-cube.

      Explanation:

      • First create a cube with six faces (one div element for each face). I've made the front face as a child element of the left face element because the front face should eventually get opened on the left hand side of the left face.
      • Each face is a 50 x 50px square whose transform and transform-origin properties are set in such a way that it creates a cube.
      • Opening animation is then attached to each of the faces and a delay is added depending on when each face should get opened. In the demo, the right face gets opened first and so it has no delay, the bottom face is opened second and so it has a delay of 1s (equal to the animation time of right face), the top face is opened third and so has a delay of 2s (equal to combined animation time of the previous two faces) and so on.
      • The back face doesn't have any animation attached because it doesn't need to open at all ;)

      .cube {
  position: relative;
  margin: 100px;
  transform-style: preserve-3d;
}
.cube div {
  position: absolute;
  height: 50px;
  width: 50px;
  transform-style: preserve-3d;
}
.back {
  background: rebeccapurple;
}
.right {
  background: tomato;
  transform: rotateY(90deg);
  transform-origin: right;
  animation: open-y 1s ease-in-out forwards;
}
.bottom {
  background: crimson;
  transform: rotateX(270deg);
  transform-origin: bottom;
  animation: open-x 1s 1s ease-in-out forwards;
}
.top {
  background: indianred;
  transform: rotateX(90deg);
  transform-origin: top;
  animation: open-x 1s 2s ease-in-out forwards;
}
.left {
  background: yellowgreen;
  transform: rotateY(270deg);
  transform-origin: left;
  animation: open-y 1s 3s ease-in-out forwards;
}
.front {
  background: chocolate;
  transform: rotateY(270deg);
  transform-origin: right;
  animation: open-y 1s 3s ease-in-out forwards;
}
@keyframes open-y {
  to {
    transform: rotateY(180deg);
  }
}
@keyframes open-x {
  to {
    transform: rotateX(180deg);
  }
}

      <div class="cube">
  <div class="back"></div>
  <div class="right"></div>
  <div class="bottom"></div>
  <div class="top"></div>
  <div class="left">
    <div class="front"></div>
  </div>
</div>

      Note: It is very much possible to achieve a similar effect in other ways also and in addition make them look a lot more realistic but that would most likely involve a good amount of translate transforms, extra keyframe settings for the animations etc - in short, a lot more complex code.

      这篇关于如何使用CSS动画创建一个多维数据集的开口如图所示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆