在我的元素中，当主页打开时，它应该运行一个 CSS 动画，以便立方体的面打开。动画完成后，面孔应该像图片中那样(我需要有一个像图片中第一个打开的结果)。
这是我的代码，
.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>我该怎么做？
最佳答案
从所提供的描述、片段和图片来看，您似乎正在尝试创建一个扁平的立方体打开动画，其中立方体的每个面一个一个打开，最终呈现第一个示例中所示的外观图片内。
也许可以通过增强您当前的代码来实现这种效果，但我发现它有点令人困惑，所以我使用了我自己的平面立方体版本。
解释:
- 首先创建一个有六个面的立方体(每个面一个
div元素)。我已将正面 面作为左 面元素的子元素，因为正面最终应该在left< 的左侧打开/em> 脸。 - 每个面都是一个 50 x 50 像素的正方形，其
transform和transform-origin属性设置为创建一个立方体。 - 然后将打开动画附加到每个面，并根据每个面应该打开的时间添加延迟。在演示中，右面首先打开，因此没有延迟，底部面第二个打开，因此有 1 秒的延迟(等于动画右 脸的时间)，顶 脸第三次打开，因此有 2 秒的延迟(等于前两个脸的组合动画时间)等等。
- 背面 没有附加任何动画，因为它根本不需要打开 ;)
.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>注意:很有可能通过其他方式实现类似的效果，此外还可以使它们看起来更加逼真，但这很可能涉及大量的平移变换，额外的动画等的关键帧设置 - 简而言之，代码复杂得多。
关于html - 如何使用CSS动画创建如图所示的立方体开口？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41424308/