CSS animations

CSS animations

Rotate to 3d

Turn picture to make it like 3D image. Add shadow box to make it more realistic. Examples:

  • https://rollingweddingpictures.com/

    .rotateTo3d {
        /* FIX:
            css transform, jagged edges in chrome
            https://stackoverflow.com/a/27065674
        */
        outline: 1px solid transparent;
    
        opacity: 0;
        animation: fadeIn 3s;
        animation-delay: 0;
        animation-fill-mode: forwards;
    
        /* When turned, it cast a shadow */
        box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
    
    }
    @keyframes fadeIn {
        from {
            opacity: 0;
        }
    
        to {
            opacity: 1;
            transform: perspective(800px) rotateY(-8deg);
        }
    }