我有<div>
个任意数量的元素。我想让每个<div>
旋转,但增加2度。该怎么做?我不确定它是否可以只用CSS,
例如:
div:nth-child(1) {
rotate(0deg);
}
div:nth-child(2) {
transform: rotate(2deg);
}
div:nth-child(3) {
transform: rotate(4deg);
}
...
// Here is the general equation, but I can't use it in CSS.
div:nth-child(n) {
transform: rotate( 2*n );
}
答案 0 :(得分:2)
试试这个:
$qty: 40;//number of childs
$step: $qty *2 ;
@for $i from 0 through $qty - 1 {
div:nth-child(#{$i + 1}) {
transform: rotate( $step+deg) ;
}
}
答案 1 :(得分:0)
由于子元素可以相对于父元素定位,因此可以使用以下命令增加它们:
.parent div{
transform:rotate(2deg);
}
<强>样本强>
div {
height: 200px;
width: 200px;
background: rgba(0, 0, 0, 0.2);
}
.parent div {
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
}
<div class="parent">
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>