Question

因此,我有这些六边形,我想在悬浮上放大。六边形由多个DIVS和CSS3变形完成。我想有的是比例转换,但转型的部件在过渡期间会失去变形,在过渡结束后会重新出现。有什么建议吗?

Here s a fiddle: http://jsfiddle.net/A2mTU/1/ Here s what it should look like (NOTE: I know they use the canvas element, I need to use regular CSS for this): http://www.upperfirst.com

谢谢!

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

Answer 2

您形成六边形图案的方式不利于应用带有绝对定位元素的动画。我建议这样: < a href="http://jsfidd.net/linmic/5aqSK/" rel="nolfollow" >http://jsfiddle.net/linmic/5aqSK/

干杯干杯

友情链接