Как создать переполнение CSS3 с помощью скрытого удаления маски с помощью поворота?

Question

Я хочу создать эффект, при котором у меня есть статическое изображение, и это изображение разоблачается вращающейся маской. Я понимаю, что в HTML5/CSS (который работает во всех браузерах) не существует собственного маскирования, поэтому я использую метод mask: overflow.

Я наткнулся на эту ссылку разместил Google: https://storage.googleapis.com/html5-demos/MaskRotateTranslate/index.html

Я пытаюсь добиться того, что изображено на втором примере. Единственное различие заключается в том, что мне не нужен внутренний образ для анимации, только это «маска».

Этот пример, похоже, был создан через Google Web Designer, поэтому я не могу использовать его код.

Я попытался воссоздать его с использованием метода счетчика анимации (A div внутри div. Внешний div действует как «маска». Когда внешний div перемещается на 30px вправо, другой движется -30px, создавая иллюзию статического содержимого). Этот метод работал для меня, пока я не начал вращать div. Похоже, что вращение влияет на значения х и у содержимого, которое искажает эффект противодействия.

Длинный рассказ. Как я могу достичь аналогичного эффекта с помощью простой Javascript или CSS-анимации? Кто-нибудь имел успех в этом типе анимации?

Answer 1

Вот моя попытка:

.image { 
 
    width: 400px; 
 
    height: 300px; 
 
    background-image: url(http://placekitten.com/800/600); 
 
    background-size: contain; 
 
    position: absolute; 
 
    left: 0px; 
 
    right: 0px; 
 
    animation: inner 4s infinite; 
 
} 
 

 
.container { 
 
    width: 400px; 
 
    height: 300px; 
 
    left: 400px; 
 
    position: relative; 
 
    animation: outer 4s infinite; 
 
    border: solid red 1px; 
 
    overflow: hidden; 
 
} 
 

 
@keyframes inner { 
 
    from {transform: rotate(0deg) translate(500px);} 
 
    to {transform: rotate(360deg) translate(0px); } 
 
} 
 

 
@keyframes outer { 
 
    from {transform: translate(-500px) rotate(0deg);} 
 
    to {transform: translate(0px) rotate(-360deg);} 
 
}

<div class="container"> 
 
    <div class="image"></div> 
 
    </div>