Question

我正在尝试旋转另一个div内的div。我的代码有什么问题。我遇到了另一种方法（：在孩子面前），但这种方法有什么问题？感谢

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

rotate3d，在支持的地方，需要参数，例如：

transform: rotate3d(1, 2.0, 3.0, 10deg)

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

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

Answer 3

给x，y或z旋转并添加值

＆＃13;

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

＆＃13;

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

＆＃13;

以下是一些可行的值

transform: rotate3d(1, 2.0, 3.0, 10deg)
transform: rotateX(10deg)
transform: rotateY(10deg)
transform: rotateZ(10deg)

SOURCE

Answer 4

您需要适应不同的浏览器。

.class {

-webkit-transform:rotate(deg);
   -moz-transform:rotate(deg);
     -o-transform:rotate(deg);
        transform:rotate(deg);
}

CSS中的transform属性问题

4 个答案: