图像比例变换跳转(仅限镀铬闪烁引擎)

时间:2015-06-18 22:31:43

标签: css3 transform easing

请将光标从图像中心移动到空白区域并返回。图像在没有动画的情况下跳到最大比例。

Video



.wrapper {
    margin : 120px;
}
.wrapper img {
    display : block;
    width : 400px;
    
    -webkit-transition: -webkit-transform 300ms linear;
    -moz-transition:    -moz-transform    300ms linear;
    -ms-transition:     -ms-transform     300ms linear;
    -o-transition:      -o-transform      300ms linear;
    transition:         transform         300ms linear;
    
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
    -o-backface-visibility:      hidden;
    backface-visibility:         hidden;
}
.wrapper img:hover {
    -webkit-transform: scale(1.5);
    -moz-transform:    scale(1.5);
    -ms-transform:     scale(1.5);
    -o-transform:      scale(1.5);
    transform:         scale(1.5);
}

<div class="wrapper">
    <img src="http://retriever-club.org/wp-content/uploads/2013/01/vospitanie-shhenka_2.jpg" />
</div>
&#13;
&#13;
&#13;

0 个答案:

没有答案
相关问题