CSS中的转换属性问题

Question

I am trying to rotate a div which is inside another div. whats wrong with my code.I come across with another method(:before child) but whats wrong with this methods? Thanks

 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> 

Answer 2

rotate3d, where supported, needs parameters, example:

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

Give x,y or z to rotate and add the value

 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> 

Here are some posible values

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

SOURCE

Answer 4

You need to adapt to different browsers.

.class {

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