Проблема в преобразовании свойства в CSS

Question

Я пытаюсь повернуть 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>

Answer 1

Дают х, у, г вращать и добавлять значение

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

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

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 4

Вам необходимо адаптироваться к различным браузерам.

.class { 

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