逐渐旋转元素

时间:2015-03-14 09:45:57

标签: css css3 sass css-animations

我有<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 );
}

2 个答案:

答案 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) ;
  }
}

also check this

答案 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>