Issue in transform property in CSS - html

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

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 3

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 4

You need to adapt to different browsers.
.class {
-webkit-transform:rotate(deg);
-moz-transform:rotate(deg);
-o-transform:rotate(deg);
transform:rotate(deg);
}