在CSS中的轉換屬性問題

我想旋轉一個div在另一個div內。我的代碼有什麼問題。我遇到了另一種方法（：在孩子之前），但這種方法有什麼問題？由於在CSS中的轉換屬性問題

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>

來源

2014-12-19 Squirtle

您沒有規定的旋轉值。 –

http://www.w3.org/Talks/2012/0416-CSS-WWW2012/Demos/transforms/demo-rotate3d.html – DaniP

http://stackoverflow.com/questions/15207351/rotate3d-shorthand –

給X，Y或Z旋轉，並添加值

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

來源

2014-12-19 13:09:10

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>

來源

2014-12-19 13:04:32 AndreaBogazzi

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>

來源

2014-12-19 13:12:27 sumitmann

您需要適應不同的瀏覽器。

.class { 

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

來源

2014-12-19 13:14:12 supportsp

在CSS中的轉換屬性問題

回答

相關問題