Html 如何使用CSS在3d中旋转两个图像？_Html_Css

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

html css

Html 如何使用CSS在3d中旋转两个图像？,html,css,Html,Css,我试图用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/

我试图用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>


试验
#im1{transform:translateZ（25px）；}
#im2{transform:translateZ（-25px）；transform:translateY（-50px）；}
#obj1{
动画：旋转2s线性无限；
透视图：1000px；
变换样式：preserve-3d；}
@旋转的关键帧
{
来自{transform:rotateY（0deg）}
到{变换：旋转（360度）}
}

根据《透视：1000》的说法，动画应该可以正常工作，但事实并非如此

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

非常感谢您抽出时间，谢谢。

我查看了您发布的初始链接/示例，并从中复制了相关的CSS代码，并将其改编为您现有的代码。以下对发布代码的编辑应按预期方式进行（如链接示例所示）

请注意：如果您运行下面的代码段，它将旋转空图像，因为您的帖子中的图像链接仍然相同（

wicon1.png

）


试验
.场景3d
{
透视图：1000px；
宽度：600px；
高度：340px；
左边距：自动；
右边距：自动；
}
.object3d
{
位置：绝对位置；
宽度：继承；
身高：继承；
/*顶部：20px*/
变换样式：保留-3d；
}
.face3d
{
位置：绝对位置；
左：165px；
顶部：15px；
}
#im1{transform:translateZ（150px）；}
#im2{transform:translateZ（-150px）；}
.scene3d.begin{透视图：100000px；}
.scene3d.end{透视图：1000px；}
#obj1{动画：旋转4s线性无限；}
@旋转的关键帧
{
从{变换：旋转（0度）；}
到{变换：旋转（360度）；}
}

它可以工作，你用哪个浏览器进行测试？我用的是谷歌Chrome。正如你所看到的，你的测试也不能工作，不是这样的。谢谢，它可以工作，但是如果你将图像的宽度更改为50px，你会看到效果消失了，我不知道为什么，就像旋转没有中心轴一样。我明白了，我不知道为什么将所有值除以10时，它的行为会有很大的不同。作为一个黑客，你可以添加

transform:scale（0.1）

到

.scene3d

，将

img

的

宽度设置为500px
，以使整个场景更小，但保持原始效果不变。