は、私がこのようなタイル張りの画像と背景を回転全画面表示をしたいと思いCSS

Question

で背景画像タイルを回転：

.overlay{ 
 
    position:fixed; 
 
    background:url(https://codepo8.github.io/canvas-images-and-pixels/img/horse.png); 
 
\t background-repeat:repeat; 
 
    -webkit-animation:180s rotate-left infinite linear; 
 
    -moz-animation:180s rotate-left infinite linear; 
 
    -o-animation:180s rotate-left infinite linear; 
 
    -ms-animation:180s rotate-left infinite linear; 
 
    animation:180s rotate-left infinite linear; 
 
    top:0; 
 
    left:0; 
 
    width:100%; 
 
height:100%; 
 
} 
 

 
@-moz-keyframes rotate-left{ 
 
    0%{ -moz-transform:rotate(0deg); -moz-transform-origin:50% 50%; } 
 
    100%{ -moz-transform:rotate(-360deg); } 
 
} 
 

 
@-webkit-keyframes rotate-left{ 
 
    0%{ -webkit-transform:rotate(0deg); -webkit-transform-origin:50% 50%; } 
 
    100%{ -webkit-transform:rotate(-360deg); } 
 
}

<div class="overlay"> 
 
</div>

は埋めるためにタイルを作るためにそこにトリックですすべてのポジションで全画面表示？

ご協力いただきありがとうございます。

Answer 1

background-sizeは、背景自体ではなくdivを回転させるため、ここでは機能しません。

数学的には、アニメーション中に親divの領域全体をカバーするようにするには、子要素の高さと幅が親要素の角の間の対角の距離よりも大きいかどうかを確認する必要があります。

したがって、do the mathのいずれかを指定するか、単にそれを本当に大きくすることができます。

body{ margin: 0; } 
 

 
.parent{ 
 
    position: relative; 
 
    height: 100vh; 
 
    width: 100vw; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
} 
 

 
.overlay{ 
 
    background:url(https://codepo8.github.io/canvas-images-and-pixels/img/horse.png); 
 
    background-repeat:repeat; 
 
    -webkit-animation:180s rotate-left infinite linear; 
 
    -moz-animation:180s rotate-left infinite linear; 
 
    -o-animation:180s rotate-left infinite linear; 
 
    -ms-animation:180s rotate-left infinite linear; 
 
    animation:180s rotate-left infinite linear; 
 
    width:1000%; 
 
    height:1000%; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
} 
 

 
@-moz-keyframes rotate-left{ 
 
    0%{ -moz-transform:rotate(0deg) translate(-50%, -50%); -moz-transform-origin: top left; } 
 
    100%{ -moz-transform:rotate(-360deg) translate(-50%, -50%); -moz-transform-origin: top left; } 
 
} 
 

 
@-webkit-keyframes rotate-left{ 
 
    0%{ -webkit-transform:rotate(0deg) translate(-50%, -50%); -webkit-transform-origin: top left; } 
 
    100%{ -webkit-transform:rotate(-360deg) translate(-50%, -50%); -webkit-transform-origin: top left; } 
 
} 
 

 
@keyframes rotate-left{ 
 
    0%{ transform:rotate(0deg) translate(-50%, -50%); transform-origin: top left; } 
 
    100%{ transform:rotate(-360deg) translate(-50%, -50%); transform-origin: top left; } 
 
}

<div class="parent"> 
 
    <div class="overlay"> 
 
    </div> 
 
</div>