CSS中的transform属性问题答案

【问题标题】：Issue in transform property in CSSCSS中的transform属性问题
【发布时间】：2014-12-19 12:58:53
【问题描述】：

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

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>

【问题讨论】：

您没有指定旋转值。
w3.org/Talks/2012/0416-CSS-WWW2012/Demos/transforms/…
stackoverflow.com/questions/15207351/rotate3d-shorthand

标签： html css

【解决方案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>

【讨论】：

【解决方案2】：

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

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

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

这里有一些可能的值

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

SOURCE

【讨论】：

【解决方案3】：

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>

【讨论】：

【解决方案4】：

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

.class {

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

【讨论】：