在图块中重复图像，然后使其旋转

Question

How do I fill a website with a repeated image in tiles, just like background-repeat: repeat; and make it rotate using either CSS or Javascript?

To rotate a single image I can use CSS:

@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}

@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}                                               

img#id {                                            
    -webkit-animation-name:             spin;  
    -webkit-animation-duration:         5s;    
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function:  linear;  
    -moz-animation-name:                spin;  
    -moz-animation-duration:            5s;    
    -moz-animation-iteration-count:     infinite;
    -moz-animation-timing-function:     linear; 
    -ms-animation-name:                 spin;  
    -ms-animation-duration:             5s;    
    -ms-animation-iteration-count:      infinite;
    -ms-animation-timing-function:      linear; 
} 

But I can't tell how I could do this to a repeated image, ie access background-image as a element or repeat a <img> and fill the whole page with given image like background-repeat .

Here 's an example of a rotating single image.

Answer 1

Based on your requirements I did something like this, although I think it is a bad option, and it can done much better...

------- Updated ------- Well, i make code more cleaner...

jsFiddle Demo updated

(function () {
    var left = 0,
        top = 0,
        background = document.getElementById("background"),
        getWidth = document.width,
        getHeight = document.height,
        imageSize = 240,
        width = 960,
        height = 960,
        countPerLine = 4,
        countOfImages = 16,
        difference = 0;

    function setParameters() {
        if (getWidth > width) {
            width = getWidth;
            countPerLine = Math.floor(getWidth / imageSize);
            difference = getWidth % imageSize;
            imageSize += Math.round(difference / countPerLine);
        }
        if (getHeight > height) {
            countOfImages = Math.floor(getHeight / imageSize);
            countOfImages *= countPerLine;
        }
    }

    function setBackground() {
        for (var i = 0; i < countOfImages; i++) {
            var div = document.createElement("div");

            div.classList.add("bgr");
            div.style.width = imageSize + "px";
            div.style.height = imageSize + "px";
            div.style.backgroundSize = "100% 100%";
            background.appendChild(div);

            if (i === 0) {
                div.style.left = "0px";
                div.style.top = "0px";
            } else {
                left += imageSize;
                if (left >= width) {
                    left = 0;
                    top += imageSize;
                }
                div.style.left = left + "px";
                div.style.top = top + "px";
            }
        }
    }

    setParameters();
    setBackground();
}());