3

だから私はホバーで拡大したいこれらの六角形のタイルを持っています。六角形は、複数の DIVS および CSS3 変換で行われます。スケールでトランジションしたいのですが、変形した部分はトランジション中に変形を失い、終了後に再び現れます。助言がありますか？

ここにフィドルがあります：http://jsfiddle.net/A2mTU/1/ これがどのように見えるかです（注：キャンバス要素を使用していることはわかっています。これには通常のCSSを使用する必要があります）：http://www.upperfirst .com

ありがとう！

4

2 に答える 2

1

The way you form the hexagonal tiles is not good for applying animations with absolute positioned elements. I would recommend this way: http://jsfiddle.net/linmic/5aqSK/

Cheers

于 2012-05-24T06:07:04.053 に答える
1

スケーリング時に現在発生している問題が発生しないように、六角形を作成するためにこの手法を使用することをお勧めします: http://jsfiddle.net/joshnh/jZMEy/

div {
    background: black;
    height: 60px;
    position: relative;
    width: 120px;
    -webkit-transition: .25s;
       -moz-transition: .25s;
        -ms-transition: .25s;
         -o-transition: .25s;
            transition: .25s;
}
div:after {
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-top: 35px solid black;
    bottom: -35px;
    height: 0;
    content: '';
    left: 0;
    position: absolute;
    width: 0;
}
div:before {
    border-bottom: 35px solid black;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    height: 0;
    content: '';
    left: 0;
    position: absolute;
    top: -35px;
    width: 0;
}
div: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);
}
于 2012-05-24T06:15:47.297 に答える