Поворот текста с эффектом нокаута; фоновое изображение не должно вращаться

Question

Я делаю один из этих нокаутирующих текстов: https://css-tricks.com/how-to-do-knockout-text/

Я также вращаю текст, но фоновое изображение вращается вместе с текстом. Вот что я получил:

#rotating-c {
    perspective: 1000px;
}

#rotating-c p {
    font-size: 300px;
    font-family: Arial, Helvetica, sans-serif;

    /* Knockout text */
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-image: url(https://images.freecreatives.com/wp-content/uploads/2015/10/free-space-textures.jpg);

    color: black;
    display: inline-block;
    margin: 0;
    animation: spin 10s linear infinite;
}

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

<div id="rotating-c">
    <p>C</p>
</div>

Как сделать фоновое изображение неподвижным и не вращающимся вместе с текстом?

Answer 1

Я думаю, что это невозможно с фоном. Другой альтернативой является рассмотрение mask с использованием SVG, где вы применяете вращение. В маске будет текстовое содержимое:

#rotating-c {
    width:200px;
    height:200px;
    display: inline-block;
    -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><style>text { transform-origin:center; animation:change 5s linear infinite;} @keyframes change { from {transform:rotateY(0deg)} to { transform:rotateY(360deg); }}<\/style><text  x="0" y="12" font-family="Arial, Helvetica, sans-serif" transform-origin="center">C</text></svg>') center/contain;
            mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><style>text { transform-origin:center; animation:change 5s linear infinite;} @keyframes change { from {transform:rotateY(0deg)} to { transform:rotateY(360deg); }}<\/style><text  x="0" y="12" font-family="Arial, Helvetica, sans-serif" transform-origin="center">C</text></svg>') center/contain;
  background-image: url(https://images.freecreatives.com/wp-content/uploads/2015/10/free-space-textures.jpg);
}

<div id="rotating-c">
    
</div>

У вас также может быть много букв для создания слова с использованием нескольких масок:

#rotating-c {
    width:600px;
    height:150px;
    display: inline-block;
    -webkit-mask:
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><style>text { transform-origin:center; animation:change 5s linear infinite;} @keyframes change { from {transform:rotateY(0deg)} to { transform:rotateY(360deg); }}<\/style><text  x="0" y="12" font-family="Arial, Helvetica, sans-serif" transform-origin="center">A</text></svg>') 0 0,
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><style>text { transform-origin:center; animation:change 5s linear infinite;} @keyframes change { from {transform:rotateY(0deg)} to { transform:rotateY(360deg); }}<\/style><text  x="0" y="12" font-family="Arial, Helvetica, sans-serif" transform-origin="center">F</text></svg>') 33.33% 0,
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><style>text { transform-origin:center; animation:change 5s linear infinite;} @keyframes change { from {transform:rotateY(0deg)} to { transform:rotateY(360deg); }}<\/style><text  x="3" y="12" font-family="Arial, Helvetica, sans-serif" transform-origin="center">I</text></svg>') 66.66% 0,
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><style>text { transform-origin:center; animation:change 5s linear infinite;} @keyframes change { from {transform:rotateY(0deg)} to { transform:rotateY(360deg); }}<\/style><text  x="0" y="12" font-family="Arial, Helvetica, sans-serif" transform-origin="center">F</text></svg>') 100% 0;
    -webkit-mask-size:150px 100%;
    -webkit-mask-repeat:no-repeat;
            mask:
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><style>text { transform-origin:center; animation:change 5s linear infinite;} @keyframes change { from {transform:rotateY(0deg)} to { transform:rotateY(360deg); }}<\/style><text  x="0" y="12" font-family="Arial, Helvetica, sans-serif" transform-origin="center">A</text></svg>') 0 0,
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><style>text { transform-origin:center; animation:change 5s linear infinite;} @keyframes change { from {transform:rotateY(0deg)} to { transform:rotateY(360deg); }}<\/style><text  x="0" y="12" font-family="Arial, Helvetica, sans-serif" transform-origin="center">F</text></svg>') 33.33% 0,
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><style>text { transform-origin:center; animation:change 5s linear infinite;} @keyframes change { from {transform:rotateY(0deg)} to { transform:rotateY(360deg); }}<\/style><text  x="3" y="12" font-family="Arial, Helvetica, sans-serif" transform-origin="center">I</text></svg>') 66.66% 0,
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><style>text { transform-origin:center; animation:change 5s linear infinite;} @keyframes change { from {transform:rotateY(0deg)} to { transform:rotateY(360deg); }}<\/style><text  x="0" y="12" font-family="Arial, Helvetica, sans-serif" transform-origin="center">F</text></svg>') 100% 0;
            mask-size:150px 100%;
            mask-repeat:no-repeat;
  background-image: url(https://images.freecreatives.com/wp-content/uploads/2015/10/free-space-textures.jpg);
}

<div id="rotating-c">
    
</div>