A）快速修复

Question

My demo 这些图像按此顺序显示，但我想按此顺序显示它们（1-3-4-2）

我在我的代码中使用了这样的订单，但这不起作用，我如何使用CSS订购它们，但没有 flex ，因为它似乎放置他们在一排。另外，我如何让它们围绕 x & y 不仅 z 显示为 3d rotation 。

＆＃13;

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;
  }
}

＆＃13;

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

＆＃13;

Answer 1

您可以在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>

Answer 2

在分享任何解决方案之前，我是否可以解决您在CSS中选择元素的一些问题？

重复id＆＃39; new＆＃39;。 id用于唯一标识元素;使用class来定位多个元素。
混合使用多种方式选择元素 - #id和nth-child。你应该选择一个，这将使你的代码更容易阅读。

现在选择解决方案......

A）快速修复

只需更改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;
}

完成。

B）CSS Grid

您尝试自行重新排序元素，而不是更改动画延迟。这就是你使用CSS Grid的方法。大多数较新的浏览器支持此功能check if it matters to you

＆＃13;

#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);
  }
}

＆＃13;

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

＆＃13;

C）Flexbox

我想添加这个，因为......谁说你不能使用flexbox，如果你通过改变ID或动画延迟的顺序来解决排序，对吗？

＆＃13;

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

＆＃13;

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

＆＃13;

用css排列图像

2 个答案:

A）快速修复

B）CSS Grid

C）Flexbox