如何使用CSS动画创建图片中的立方体开口? [英] How to use CSS animations to create a cube's opening like in the picture?

查看：42
本文介绍了如何使用CSS动画创建图片中的立方体开口?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在我的项目中，打开主页时，应运行CSS动画，以便打开多维数据集的面.动画完成后，脸部应该像图片中的一样(我需要具有 结果，如图片中的第一个开口 ).

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).

这是我的代码，

.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>

我该怎么做?

推荐答案

从描述，代码段和所提供的图片来看，似乎您正在尝试创建一个平面立方体打开动画，其中立方体的每个面都打开一个并最终得到图片中第一个样本所示的外观.

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.

说明:

  • 首先创建一个具有六个面的多维数据集(每个面一个 div 元素).我将 front 面作为 left 面元素的子元素，因为正面最终应在 left 脸.
  • 每张脸都是一个50 x 50像素的正方形，其 transform 和 transform-origin 属性设置为创建多维数据集的方式.
  • 然后将打开动画附加到每个面孔，并根据何时打开每个面孔添加延迟.在演示中，首先打开 right 面孔，因此没有延迟，接着打开 bottom 面孔，因此延迟为1s(等于动画) right 人脸的时间)， top 人脸被打开第三次，因此具有2s的延迟(等于前两个人脸的组合动画时间)，依此类推.
  • 后背脸没有任何动画，因为根本不需要打开它；)
  • 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天全站免登陆