Give advice in the implementation of the next task. There are two images. you need to make it so that when one image turns over another was shown. with hover, I was able to implement it, however, it is necessary to make the animation play without hover. hover code worker

.about-me__image { position: relative; perspective: 1000px; } .about-me__image:hover .front { transform: rotateY(180deg); } .about-me__image:hover .back { transform: rotateY(360deg); } .front { position: relative; transition: 2s; backface-visibility: hidden; } .back { position: absolute; left: 0; top: 0; transition: 2s; transform: rotateY(180deg); backface-visibility: hidden; width: 100%; } .about-me__image img { width: 100%; height: auto; } 
 <div class="about-me__image slideInLeft wow"> <div class="front"> <img src="https://picua.org/images/2018/11/17/a1efa87050160308e0afe15637b08191.png" alt="a1efa87050160308e0afe15637b08191.png" border="0" /> <div class="back"> <img src="https://picua.org/images/2018/11/17/560b24bae099abf1bacdbafb162d62b2.jpg"> </div> </div> </div>

code without guidance

 body { background: #000; } .about-me__image { position: relative; perspective: 1000px; } .front { position: relative; transition: 2s; backface-visibility: hidden; animation-name: frontfase; animation-duration: 4s; animation-delay: 2s; /*animation-fill-mode: forwards;*/ /* animation-iteration-count: 1; */ } @keyframes frontfase { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(180deg); } } @keyframes backfase { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .back { position: absolute; left: 0; top: 0; transition: 2s; transform: rotateY(180deg); backface-visibility: hidden; width: 100%; animation-name: backfase; animation-duration: 4s; animation-delay: 2s; animation-fill-mode: forwards; /* animation-iteration-count: infinite; */ } .about-me__image img { width: 100%; height: auto; } 
 <div class="about-me__image slideInLeft wow"> <div class="front"> <img src="https://picua.org/images/2018/11/17/a1efa87050160308e0afe15637b08191.png" alt="a1efa87050160308e0afe15637b08191.png" border="0" /> <div class="back"> <img src="https://picua.org/images/2018/11/17/560b24bae099abf1bacdbafb162d62b2.jpg"> </div> </div> </div>

How to do what would be the same effect as when you hover, now as if you can see the back of the image.

    2 answers 2

     * { padding: 0; margin: 0; } html, body { background: #000; width: 100%; height: 100%; } .about-me__image { position: relative; perspective: 1000px; width: 100%; height: 100%; } .foto-wrapper { position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; transform: translate(-50%, -50%); transform-style: preserve-3d; animation: rotate 3s infinite ease-in-out running; } img { position: absolute; width: 300px; height: 300px; } .front { transform: rotateY(360deg); } @keyframes rotate { from { transform: translate(-50%, -50%) rotateY(0); } 50% { transform: translate(-50%, -50%) rotateY(180deg); } to { transform: translate(-50%, -50%) rotateY(360deg); } } 
     <div class="about-me__image slideInLeft wow"> <div class="foto-wrapper"> <img class="back" src="https://picua.org/images/2018/11/17/560b24bae099abf1bacdbafb162d62b2.jpg"> <img class="front" src="https://picua.org/images/2018/11/17/a1efa87050160308e0afe15637b08191.png" alt="a1efa87050160308e0afe15637b08191.png" /> </div> </div>

      Obviously so ??

      Do not forget to skip through autoprefixer

       .about-me__image { position: relative; perspective: 200px; width: 200px; margin: 100px; } .front { position: relative; transition: 2s; backface-visibility: hidden; } .back { position: absolute; left: 0; top: 0; transition: 2s; transform: rotateY(180deg); backface-visibility: hidden; width: 100%; } .about-me__image img { width: 100%; height: auto; } .about-me__image .front { animation: front 4s linear infinite; } .about-me__image .back { animation: back 4s linear infinite; transform: rotateY(360deg); } @keyframes front { from { transform: rotateY(180deg); } to { transform: rotateY(0); } } @keyframes back { from { transform: rotateY(0); } to { transform: rotateY(-180deg); } } 
       <div class="about-me__image slideInLeft wow"> <div class="front"> <img src="https://picua.org/images/2018/11/17/a1efa87050160308e0afe15637b08191.png" alt="a1efa87050160308e0afe15637b08191.png" border="0" /> <div class="back"> <img src="https://picua.org/images/2018/11/17/560b24bae099abf1bacdbafb162d62b2.jpg"> </div> </div> </div>

      • Thank you so much for your help. honestly helped a lot. Can you tell me more about how to make this animation smooth? just now there is a little delay. when one side replaces the other (in the center of a hitch) - Alexey Bilenko
      • 3
        Alexey Bilenko, you already accepted the answer, not beautiful ... Nikita's answer, not worse, and especially the first one answered ... - Air