css - 为什么我有这些带有某些分辨率的镀铬白色边框以及如何删除它们？

Question

我正在使用 CSS 旋转来获得 CSS 中的万花筒效果。

一切似乎都很好，除了 Chrome 在某些分辨率下（在 IE10 上没有问题，我没有测试 FF）

我不知道为什么，但有时我在万花筒的中心有一些奇怪的白色边框，即使旋转值看起来一切都很好。我找不到任何解决方法...

您可以在这里测试一个工作演示：http: //jsfiddle.net/Lvc0u55v/4519/

您可能需要从 jsfiddle 移动滑块才能看到显示的白色边框。

我正在使用这种 css:transform: rotate(151deg) matrix(-1, 0, 0, 1, 0, 0)带有背景图像。

你能帮我去掉这些边框吗？

Answer 1

希望这会有所帮助。

var myApp = angular.module('myApp', []);
myApp.controller('mainCtrl', ['$scope', '$timeout',
function($scope, $timeout) {
    $scope.bgImage = 'url(http://www.larousse.fr/encyclopedie/data/images/1310226-Vincent_Van_Gogh_la_Nuit_%C3%A9toil%C3%A9e.jpg)';
    var section = 12;
    $scope.getNumber = function() {
        return new Array(section);
    }
    $scope.getRotation = function(i) {
        var hasMatrix = false, deg = 0, base = 360 / section, rotation;
        if (i % 2 === 0) {
            i -= 1;
            hasMatrix = true;
        }
        deg = Math.round(i * base + 1);
        if (section <= 4) {
            deg -= 1;
        }
        rotation = 'rotate(' + deg + 'deg)';
        if (hasMatrix) {
            // Please updated this line
            rotation += ' matrix(-1, 0, 0, 1, -1, 0)';
        }
        return rotation;
    }
    $scope.mode = 'move';
    $scope.onMousemove = function(e) {
    console.log($scope.mode);
    if ($scope.mode === 'move') {
        $scope.bgPosition = e.pageX + 'px ' + e.pageY + 'px';
    }
    };
}]);