html - CSS 中的转换属性问题

Question

我正在尝试旋转位于另一个 div 内的 div。我的代码有什么问题。我遇到了另一种方法(:在 child 之前)但是这个方法有什么问题？谢谢

body {
  background: #ccc
}
.box {
  width: 70%;
  height: 200px;
  background: #FFF;
  margin: 40px auto;
}
.effect2 {
  position: relative;
}
.box1 {
  transform: rotate3d;
  position: absolute;
  width: 20%;
  height: 20px;
  background-color: aqua;
}

<div class="box effect2">
  <div class="box1"></div>
</div>

Answer 1

body {
  background: #ccc
}
.box {
  width: 70%;
  height: 200px;
  background: #FFF;
  margin: 40px auto;
}
.effect2 {
  position: relative;
}
.box1{
    transition: 1.5s;
    position: absolute;
    width: 20%;
    height: 20px;
    background-color: aqua;
}
.box1:hover{
          transform: rotate3d(1,-1, 1,60deg);
       }

<div class="box effect2">
  <div class="box1"></div>
</div>