CODEWITHSUNDEEP
htmlcss
Squirtle
Squirtle

Reputation: 151

Issue in transform property in CSS

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>

Upvotes: 0

Views: 66

Answers (4)

supportsp
supportsp

Reputation: 73

You need to adapt to different browsers.

.class {

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

Upvotes: 0

sumitmann
sumitmann

Reputation: 393

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>

Upvotes: 1

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

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

Upvotes: 0

AndreaBogazzi
AndreaBogazzi

Reputation: 14731

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>

Upvotes: 0

Related Questions