Question

我正在尝试用css实现这个3d几何变换的例子：

但我的动画效果并不像那个例子，这就是我所拥有的：

<!DOCTYPE html>
<html>
<head>
  <meta charset ="utf-8">
  <title>Test</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
</head>

<body>
  <style>
  #im1 { transform: translateZ(25px); }
  #im2 { transform: translateZ(-25px); transform: translateY(-50px); }
  #obj1 {
    animation: theRotate 2s linear infinite;
    perspective: 1000px;
    transform-style: preserve-3d;}

  @keyframes theRotate
  {
    from {transform: rotateY(0deg)   }
    to   {transform: rotateY(360deg) }
  }
</style>

  <div class="container">
    <div class="row">

      <div class="col-sm-1 col-md-1" id="obj1">
        <img src="wicon2.png" id="im1" style="width:50px">
        <img src="wicon.png" id="im2" style="width:50px">
      </div>

    </div>
  </div>


</body>
</html>

根据this，透视：1000动画应该可以正常工作，但事实并非如此。

如果有另一种简单的方法可以做到这一点，也许用JS，也可以。

感谢您的时间，谢谢。

Answer 1

我查看了您发布的初始链接/示例，并从那里复制了相关的CSS代码，并将其修改为您现有的代码。以下对已发布代码的编辑应按预期方式工作（显示在链接示例中）。

请注意：如果您运行下面的代码段，则会轮换空图片，因为图片链接仍然与您的帖子相同（wicon1.png）

<html>
<head>
  <meta charset ="utf-8">
  <title>Test</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
</head>

<body>
<style>

.scene3d
{
  perspective: 1000px;
  width: 600px;
  height: 340px;
  margin-left: auto;
  margin-right: auto;
}
.object3d
{
  position: absolute;
  width: inherit;
  height: inherit;
  /*top: 20px;*/
  transform-style: preserve-3d;
}
.face3d
{
  position: absolute;
  left: 165px;
  top: 15px;
}

#im1 { transform: translateZ(150px); }
#im2 { transform: translateZ(-150px); }
.scene3d.begin { perspective: 100000px; }
.scene3d.end   { perspective: 1000px; }
#obj1 { animation: theRotate 4s linear infinite; }

@keyframes theRotate
{
  from {transform: rotateY(0deg);}
  to   {transform: rotateY(360deg);}
}



</style>

<div class="container">
  <div class="row scene3d">

    <div class="col-sm-1 col-md-1 object3d" id="obj1">
      <img src="wicon1.png" id="im1" class="face3d" style="width:50px">
      <img src="wicon2.png" id="im2" class="face3d" style="width:50px">
    </div>

  </div>
</div>


</body>
</html>

如何使用CSS在3D中旋转两个图像？

1 个答案: