3

サイズ 50 x 50 のボタンがあります。ホバーすると、このボタンを 70 x 70 サイズのボタンに置​​き換える必要があります。また、移行はスムーズでなければなりません。

ということで、CSSのトランジションとトランスフォーム機能を使ってみました。つまり、z 軸の transform3d です。

<style>

.button1{
    position:absolute;
    top:0px;
    left:0px;
    display:inline-block;
    width:50px;
    height:50px;
    background:url(images/button.png) no-repeat;
    background-position:bottom left;
    /* Transition */
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.button1:hover{
    width:70px;
    height:70px;
    background-position:top left;
    -webkit-transform: translate3d(0, 0, 10px);
    -moz-transform: translate3d(0, 0, 10px);
    -ms-transform: translate3d(0, 0, 10px);
    -o-transform: translate3d(0, 0, 10px);
}

</style>

</head>
<body>
<a href="#" class="button1"></a>
</body>

x および y 変換に対してこのコードを試してみましたが、動作します。ただし、z 軸では機能しません。

基本的に、ホバー時にスムーズなイージング ズーム効果が必要です。

提案してください。

4

1 に答える 1

18

ディメンションと変換を同時にスケーリングしようとすることで、問題が複雑になりすぎています。

変換を適用するだけscaleで目的が達成されますが、スケールが大きいと画像やテキストがぼやけてしまう可能性があります。

.button:hover {
    /* Un-prefixed. Prefix `transform` for all target browsers. */
    transform: scale(1.2);
    }
于 2013-01-23T12:23:06.260 に答える