所以我有这些六 Angular 形的瓷砖,我想在悬停时放大它们。六边形是通过多个 DIVS 和 CSS3 转换完成的。我想在比例上进行过渡,但变换后的部分在过渡期间会失去变换,并在完成后重新出现。有什么建议吗?
这是一个 fiddle :http://jsfiddle.net/A2mTU/1/ 它应该是这样的(注意:我知道他们使用 canvas 元素,为此我需要使用常规 CSS):http://www.upperfirst.com
谢谢!
最佳答案
我建议使用这种技术来创建六边形,这样您在缩放它们时就不会遇到当前遇到的问题: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);
}
关于CSS3 Transformed 元素在转换过程中失去它们的转换。 (包括 jsFiddle),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10731727/