使用 -webkit-transform 时的 Webkit 边框半径出血问题
我用 jQuery 制作了一个简单的脚本，它获取图像并缓慢旋转它。 链接到示例
deg = 0;
derp = false;
function callRotate(){
if(!derp){
setInterval(rotate, 50);
}
}
function rotate(){
$("#rotate_me > img").css({"-webkit-transform":"rotate("+ deg +"deg)", "-moz-transform":"rotate("+ deg +"deg)"});
deg+=.2;
}
callRotate();
我决定在 div 上放置一个等于 1/ 的边框半径2 div 高度使图像看起来像一个圆形。旋转在 Firefox 4.0.1 中看起来很好，但当我在 Chrome 中测试它时，旋转开始后图像就会超出边框半径。有谁知道有什么方法可以防止图像溢出？
I made a simple script in jQuery that takes an image and slowly rotates it.
Link to example
deg = 0;
derp = false;
function callRotate(){
if(!derp){
setInterval(rotate, 50);
}
}
function rotate(){
$("#rotate_me > img").css({"-webkit-transform":"rotate("+ deg +"deg)", "-moz-transform":"rotate("+ deg +"deg)"});
deg+=.2;
}
callRotate();
I decided to put a border-radius on the div equal to 1/2 of the div height to make the image look like a circle. The rotation looks fine in Firefox 4.0.1, but when i tested it in Chrome the image bleeds over the border-radius as soon as the rotation starts. Does anyone know of a way to prevent the image from bleeding over?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您应该在 CSS 中将图像设置为 div 的背景，然后旋转 div。
You should make the image the background of the div in CSS, then rotate the div.
您可以将
border-radius赋予img，但它在 Opera 中不起作用（无论如何它都不起作用）。You can give
border-radiustoimg, but it wont work in Opera (it's not working anyway).尝试transform-style:preserve-3d
http://blog.csdn.net/w20101310/article /详细信息/52298636
try transform-style:preserve-3d
http://blog.csdn.net/w20101310/article/details/52298636