My demo 这些图像按此顺序显示，但我想按此顺序显示它们（1-3-4-2）
我在我的代码中使用了这样的订单，但这不起作用，我如何使用CSS订购它们，但没有 flex ，因为它似乎放置他们在一排。
另外，我如何让它们围绕 x & y 不仅 z 显示为 3d rotation 。
ul {
position: relative;
width: 100%;
}
#1 {order: 1;}
#2 {order: 4;}
#3 {order: 2;}
#4 {order: 3;}
li {
float: left;
width: 100%
}
#new{
width: 50%
}
img {
opacity: 0;
animation-name: fadeIn;
animation-duration: 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
li:nth-child(1) > img {
width: 20%;
margin-left:40%;
}
li:nth-child(2) > img {
width: 40%;
margin-left:20%;
animation-delay: 3s;
}
li:nth-child(3) > img {
width: 40%;
margin-left:40%;
animation-delay: 6s;
}
li:nth-child(4) > img {
width: 20%;
margin-left:40%;
animation-delay: 9s;
}
@keyframes fadeIn {
0% {
opacity: 0;
transform:rotateZ(0deg);
}
100% {
transform:rotateZ(360deg);
opacity: 1;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<li><img id="1" src="https://i.imgur.com/6WD0tuL.png" /></li>
<li id="new"><img id="2" src="https://i.imgur.com/6WD0tuL.png" /></li>
<li id="new"><img id="3" src="https://i.imgur.com/6WD0tuL.png" /></li>
<li><img id="4" src="https://i.imgur.com/6WD0tuL.png" /></li>
</ul>
</body>
</html>
答案 0 :(得分：0)
您可以在css中调整动画延迟的时间，以获得所需的顺序。要在3D中翻译图像，您可以查看W3 3D Transforms处的样本;虽然，如果你真的想让它看起来像地球图像在3D中旋转，那么你可以使用精灵图像/ gif。
ul {
position: relative;
width: 100%;
}
/*#1 {order: 1;}
#2 {order: 4;}
#3 {order: 2;}
#4 {order: 3;}*/
li {
float: left;
width: 100%;
}
#new {
width: 50%;
}
img {
opacity: 0;
animation-name: fadeIn;
animation-duration: 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
li:nth-child(1) > img {
width: 20%;
margin-left: 40%;
}
li:nth-child(2) > img {
width: 40%;
margin-left: 20%;
animation-delay: 6s;
}
li:nth-child(3) > img {
width: 40%;
margin-left: 40%;
animation-delay: 3s;
}
li:nth-child(4) > img {
width: 20%;
margin-left: 40%;
animation-delay: 9s;
}
@keyframes fadeIn {
0% {
opacity: 0;
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
opacity: 1;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<li><img id="1" src="https://i.imgur.com/c117rlU.png" /></li>
<li id="new"><img id="2" src="https://i.imgur.com/c117rlU.png" /></li>
<li id="new"><img id="3" src="https://i.imgur.com/c117rlU.png" /></li>
<li><img id="4" src="https://i.imgur.com/c117rlU.png" /></li>
</ul>
</body>
</html>
答案 1 :(得分：0)
在分享任何解决方案之前，我是否可以解决您在CSS中选择元素的一些问题？
id＆＃39; new＆＃39;。 id用于唯一标识元素;使用class来定位多个元素。#id和nth-child。你应该选择一个，这将使你的代码更容易阅读。现在选择解决方案......
只需更改animation-delay值：
li:nth-child(2) > img {
...
animation-delay: 9s;
}
li:nth-child(3) > img {
...
animation-delay: 3s;
}
li:nth-child(4) > img {
...
animation-delay: 6s;
}
完成。
您尝试自行重新排序元素，而不是更改动画延迟。这就是你使用CSS Grid的方法。大多数较新的浏览器支持此功能check if it matters to you
#globes {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas:
"... g-1 ..."
"g-3 ... g-4"
"... g-2 ..."
;
}
#globe-1 { grid-area: g-1; }
#globe-2 { grid-area: g-2; }
#globe-3 { grid-area: g-3; }
#globe-4 { grid-area: g-4; }
#globe-1 > img { animation-delay: 0; }
#globe-2 > img { animation-delay: 3s; }
#globe-3 > img { animation-delay: 6s; }
#globe-4 > img { animation-delay: 9s; }
#globes img {
width: 40%;
opacity: 0;
animation-name: fadeIn;
animation-duration: 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes fadeIn {
0% {
opacity: 0;
transform: rotateZ(0);
}
100% {
opacity: 1;
transform: rotateZ(360deg);
}
}<div id="globes">
<div id="globe-1"><img src="https://i.imgur.com/6WD0tuL.png"></div>
<div id="globe-2"><img src="https://i.imgur.com/6WD0tuL.png"></div>
<div id="globe-3"><img src="https://i.imgur.com/6WD0tuL.png"></div>
<div id="globe-4"><img src="https://i.imgur.com/6WD0tuL.png"></div>
</div>
我想添加这个，因为......谁说你不能使用flexbox，如果你通过改变ID或动画延迟的顺序来解决排序，对吗？
.row {
width: 100%;
display: flex;
justify-content: center;
}
.col {
width: 33.33%;
text-align: center;
}
#globe-1 > img { animation-delay: 0; }
#globe-2 > img { animation-delay: 3s; }
#globe-3 > img { animation-delay: 6s; }
#globe-4 > img { animation-delay: 9s; }
#globes img {
width: 40%;
opacity: 0;
animation-name: fadeIn;
animation-duration: 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes fadeIn {
0% {
opacity: 0;
transform: rotateZ(0);
}
100% {
opacity: 1;
transform: rotateZ(360deg);
}
}<div id="globes">
<div class="row">
<div id="globe-1" class="col"><img src="https://i.imgur.com/6WD0tuL.png"></div>
</div>
<div class="row">
<div id="globe-3" class="col"><img src="https://i.imgur.com/6WD0tuL.png"></div>
<div class="col"></div>
<div id="globe-4" class="col"><img src="https://i.imgur.com/6WD0tuL.png"></div>
</div>
<div class="row">
<div id="globe-2" class="col"><img src="https://i.imgur.com/6WD0tuL.png"></div>
</div>
</div>