Question

我正在使用javascript函数来翻转div，但是当我调用此函数时，div应该从0.01 to 1比例缩放。我怎么能这样做？

的CSS：

 transform: scaleX(0.01);
 transform: scaleX(1);

使用Javascript：

function flip1(){
    $('#category-1').delay(100).css('display', 'none');
    $('.box-1').delay(100).css('display', 'block');
    $('.box-1').transition({
        perspective: '100px',
        rotateY: '360deg'
      },200)  
    setTimeout(startSlidecat1, 2000);
  }

现在它正在缓慢旋转，而不是旋转我想添加 scaleX从0.01到1，我现在有相同的延迟。

Answer 1

可以用简单的css来完成

//scale(0.2,0.2) you can change the values according to your requirement

CSS翻转和缩放

.cards{
    margin:30px;
    perspective: 500;
    -webkit-perspective: 500;
    -moz-perspective: 500;
    -ms-perspective: 500;
    -o-perspective: 500;
    width:200px;
    height:200px;
    background-color:#5000FF;
    transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -o-transform-style:preserve-3d;
    position:absolute;
    cursor:pointer;
    /* Animate the transitions */
    -webkit-transition:0.8s; text-align:center;
    -moz-transition:0.8s; text-align:center;
    -ms-transition:0.8s; text-align:center;
    -o-transition:0.8s; text-align:center;
    transition:0.8s; text-align:center;

}

.flip{
  transform:rotateY(180deg) scale(0.2,0.2);
  -webkit-transform:rotateY(180deg) scale(0.2,0.2);
  -moz-transform:rotateY(180deg);
  -o-transform:rotateY(180deg);
  -ms-transform:rotateY(180deg);
  background-color:#FF5959;

}

JSFIDDLE DEMO

Answer 2

选中此plunker

的CSS：

div{
  height: 200px;
  width:200px;
  background: red;
  -webkit-transition:all 2s linear;
  -moz-transition:all 2s linear;
  -ms-transition:all 2s linear;
  -o-transition:all 2s linear;
  transition:all 2s linear;
}
.rotate{
  -webkit-transform: rotateY(360deg) scale(2.0);
  -moz-transform: rotateY(360deg) scale(2.0);
  -ms-transform: rotateY(360deg) scale(2.0);
  -o-transform: rotateY(360deg) scale(2.0);
  transform: rotateY(360deg) scale(2.0);
}

如何从jquery css

2 个答案: