如何制作jquery / css缩放效果

Question

我想在我的网站上制作一个具有平衡效果的音阶。它应该上下，上下等等。看看下面的示例

jquery或css中有什么东西可以对对象产生这种影响吗？

Answer 1

您正在寻找的可能是CSS变换。 http://www.w3schools.com/cssref/css3_pr_transform.asp

它具有旋转属性，您可以在顶部设置并相应地更改以获得所需的效果。

http://www.w3schools.com/cssref/playit.asp?filename=playcss_transform_rotate

Answer 2

i made a js fiddle that should answer your question.

$(document).ready(function(){
  var leftSize = $('#left-box').height() * $('#left-box').width();
  var rightSize = $('#right-box').height() * $('#right-box').width();
  if (rightSize >= leftSize) {
    var rotatePercent = 1 - (leftSize / rightSize);
    var Deg = (rotatePercent * 20);
    $('#scale-top').css({
        transform: 'rotate(' + Deg + 'deg)',
    })
  } else if (leftSize > rightSize) {
    var rotatePercent = 1 - (rightSize / leftSize);
    var Deg = (rotatePercent * 20);
    $('#scale-top').css({
        transform: 'rotate(-' + Deg + 'deg)',
    })
  } else if (leftSize === rightSize ) {
    $('#scale-top').css({
        transform: 'rotate(0deg)',
    })
  }
});

它几乎计算每个div的面积，将较小的一个的大小除以较大的一个，从1中减去该答案以获得它应该旋转的数量，将该数字乘以20并将该数字用于度数它旋转。

Answer 3

仅限CSS版本：

关键帧动画：

@keyframes scale-top{
 from {transform: rotate(-20deg);}
 to{transform: rotate(20deg);}
}

在大矩形div中：

animation: scale-top 5s infinite alternate-reverse;

在Chrome中进行测试：https://jsfiddle.net/4cykoudp/