Question

我一直在尝试对列方案中的图像应用CSS3 -webkit-transform效果。目前我有以下演示：

<html>
<head>
<meta charset="UTF-8" />
<title>Demo</title>
<style>

    div.colSection article {
        display: inline-block;
        column-break-after: always; 
        column-break-inside:avoid;
        break-inside:avoid-column;
        -webkit-column-break-after: always;
        -moz-column-break-after: always;
        -webkit-column-break-inside:avoid;
        -moz-column-break-inside:avoid;
    }

    div.colSection.noticias {
        column-count: 3;
        -webkit-column-count:3;
        -moz-column-count:3;
    }

    img.scale {
        -webkit-transition: all 0.5s ease-in;
        -moz-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }

    img.scale:hover {
        -moz-transform: scale(1.1); 
        -webkit-transform: scale(1.1); 
        -o-transform: scale(1.1); 
        transform: scale(1.1); 
    }

    </style>
</head>

<body>

<div class="section main" id="noticias">
    <h1>News</h1>

    <div class="colSection noticias">

        <article>
            <img src="http://i.imgur.com/ysmA3VD.jpg" alt="" class="scale" />
            <h2>N1</h2>
            <p>T1</p>
        </article>

        <article>
            <img src="http://i.imgur.com/ysmA3VD.jpg" alt="" class="scale" />   
            <h2>N2</h2>
            <p>T2</p>
        </article>

        <article>
            <img src="http://i.imgur.com/ysmA3VD.jpg" alt="" class="scale" />   
            <h2>N3</h2>
            <p>T3</p>
        </article>

    </div>

</div>

</body>
</html>

代码的问题在于动画往往会出现奇怪的行为，例如：

的Safari 当我将鼠标放在第二个图像上时，没有动画发生但图像只是消失了。第一个用作缩进，最后一个没有任何反应。
铬中间图像下降，最后一个图像闪烁了一点。

CSS3：列和-webkit-transform效果

0 个答案: