如何从jquery css中扩展div

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

现在它正在缓慢旋转,而不是旋转我想要添加 scaleX0.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