Issue in transform property in 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>

http://www.w3.org/Talks/2012/0416-CSS-WWW2012/Demos/transforms/demo-rotate3d.html — DaniP, Dec 19 '14 at 13:02
http://stackoverflow.com/questions/15207351/rotate3d-shorthand — Paulie_D, Dec 19 '14 at 13:05

score 1 · Answer 1 · answered Dec 19 '14 at 13:12

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>

score 0 · Answer 2 · answered Dec 19 '14 at 13:04

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>

score 0 · Accepted Answer · answered Dec 19 '14 at 13:09

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

score 0 · Answer 4 · answered Dec 19 '14 at 13:14

0

You need to adapt to different browsers.

.class {

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

answered Dec 19 '14 at 13:14

supportsp

63
2
11

Issue in transform property in CSS

4 Answers4