使用CSS创建此旋转动画

创建旋转动画的CSS

首先，我们需要通过CSS来创建这个旋转动画。下面是CSS样式代码，可以将其放到<style>标签中，或者单独写成一个CSS文件：

/* 容器 */

.outer {
  width: 200px;
  height: 200px;
  position: relative;
}
/* 方块和小方块 */
.outer .box {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #000;
  transform-style: preserve-3d;
  animation: rotate 6s infinite;
}
.outer .box .small-box {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 75px;
  left: 75px;
  background-color: #F44336;
  transform-style: preserve-3d;
  animation: rotate-small 3s infinite;
}
/* 3D旋转动画 */
@keyframes rotate {
  0% {
    transform: perspective(400px) rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: perspective(400px) rotateX(360deg) rotateY(360deg);
  }
}
@keyframes rotate-small {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

这个样式用到了3D变换中的perspective、rotateX、rotateY和rotateZ功能，可以让元素在三维空间中旋转。其中perspective定义了元素距离用户的距离，rotateX、rotateY和rotateZ定义了元素的旋转角度。这些功能都是CSS3新增的，现代浏览器都支持。

JavaScript代码

想要在页面中显示这个动画，我们还需要一些JavaScript代码。下面是JavaScript代码，可以将其放到<script>标签中，或者单独写成一个.js文件：

// 查询容器元素

var outer = document.querySelector('.outer');
// 创建方块和小方块
var box = document.createElement('div');
box.className = 'box';
var smallBox = document.createElement('div');
smallBox.className = 'small-box';
box.appendChild(smallBox);
outer.appendChild(box);

这段代码创建了两个元素，一个是方块（box），另一个是小方块（small-box），并将它们添加到容器（outer）中。这样就能够在页面中看到这个旋转动画了。

总结

通过CSS和JavaScript，我们可以轻松地创建一个旋转动画，并且将其添加到页面中。这种动画能够吸引用户的眼球，让页面更加生动和有趣。如果你对CSS3和JavaScript的基础知识掌握不够，建议先进行学习和练习。