我有一个svg面具,在悬停时顺时针旋转,内部有一个图片填充。 我希望图片逆时针旋转以补偿悬停时形状的旋转。
我的问题是,当悬停时,图片会变形。 我试图有一个溢出:隐藏但它不起作用。
这是我的jsfiddle: http://jsfiddle.net/nyb5wffv/1/
#hex {
overflow:hidden;
}
svg {
padding: 50px;
width: 200px;
height: 200px;
transition: all 0.25s;
}
svg a {
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
transform: rotate(0deg);
}
svg:hover{
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
}
svg:hover a {
-ms-transform: rotate(-7deg); /* IE 9 */
-webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
transform: rotate(-7deg);
}
答案 0 :(得分:1)
不要旋转整个SVG,然后尝试对图像进行反向旋转,只需旋转六边形即可。将旋转多边形(以及clipPath),但图像将不受影响。
svg #hex {
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
transform: rotate(0deg);
-ms-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
transform: 50% 50%;
}
svg:hover #hex {
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
}