KI-Kunst-Kirsten-Kloeckner/KIKunstKirstenKlöckner/Pages/FlippingImage.razor

<style>
    .flip-card {
        background-color: transparent;
        width: 12em;
        height: 12em;
        perspective: 30em;
        transition: transform 0.2s;
        z-index: auto;
    }
    
    .flip-card:hover {
        transform: scale(1.1, 1.1);
        z-index: 100;
    }

    .flip-card-inner {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        transform-style: preserve-3d;
    }

    .flip-card_up .flip-card-inner {
        transition: transform 0.6s var(--delay);
        transform: rotateX(180deg);
    }

    .flip-card_down .flip-card-inner {
        transition: transform 0.6s var(--delay);
        transform: rotateX(-180deg);
    }

    .flip-card_left .flip-card-inner {
        transition: transform 0.6s var(--delay);
        transform: rotateY(-180deg);
    }

    .flip-card_right .flip-card-inner {
        transition: transform 0.6s var(--delay);
        transform: rotateY(180deg);
    }

    .fade-out-flipped-5 {
        animation: fadeOut 5s;
        animation-fill-mode: forwards;
        transform: rotateY(180deg);
    }
    
    .flip-card-front, .flip-card-back_up, .flip-card-back_down, .flip-card-back_left, .flip-card-back_right {
        position: absolute;
        width: 100%;
        height: 100%;
        /* Rückseite beider Karten-Seiten verstecken wird nicht angezeigt */
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    }
    /* Rückseite der Karte ist 180 Grad gedreht */
    .flip-card-front {
        /*box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);*/
    }
    
    .flip-card-back_up {
        transform: rotateX(-180deg);
    }

    .flip-card-back_down {
        transform: rotateX(180deg);
    }

    .flip-card-back_left {
        transform: rotateY(180deg);
    }

    .flip-card-back_right {
        transform: rotateY(-180deg);
    }
    
    .flip-card-content {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
</style>

<div class="flip-card @(Show ? "" : _flipperClassName)">
    <div class="flip-card-inner" style="--delay: @(FlipDelay)ms;">
        <div class="@(Show ? "fade-out-5 flip-card-front" : _backClassName)" style="@(HideImage ? "opacity: 0;": "opacity: 1;")">
            <div class="d-flex justify-content-center align-items-center flip-card-content">
                <div class="d-flex justify-content-center align-items-center">
                    <RadzenProgressBarCircular ProgressBarStyle="ProgressBarStyle.Primary" ShowValue="false" Mode="ProgressBarMode.Indeterminate"
                                               Style="width:12em;height:12em; " />
                </div>
            </div>
        </div>
        <div class="flip-card-front" style="@(HideImage ? "opacity: 0;": "opacity: 1;")">
            <RadzenImage Path="@ImageUrl" Style="width:12em;height:12em;" Click="@Click" class="@(Show ? "fade-in-5" : "")" />
        </div>
    </div>
</div>

@code {
    [Parameter]
    public bool Show { get; set; }

    [Parameter]
    public bool HideImage { get; set; }

    [Parameter]
    public string ImageUrl { get; set; } = "images/robot_painting.jpg";

    public enum FlipDirection
    {
        Up,
        Down,
        Left,
        Right
    }

    private string _flipperClassName;
    private string _backClassName;
    private FlipDirection _flipTo;

    [Parameter]
    public FlipDirection FlipTo
    {
        get => _flipTo;
        set
        {
            _flipTo = value;
            _flipperClassName = _flipTo switch
            {
                FlipDirection.Up => "flip-card_up",
                FlipDirection.Down => "flip-card_down",
                FlipDirection.Left => "flip-card_left",
                FlipDirection.Right => "flip-card_right",
                _ => throw new ArgumentOutOfRangeException()};
            _backClassName = _flipTo switch
            {
                FlipDirection.Up => "flip-card-back_up",
                FlipDirection.Down => "flip-card-back_down",
                FlipDirection.Left => "flip-card-back_left",
                FlipDirection.Right => "flip-card-back_right",
                _ => throw new ArgumentOutOfRangeException()};
        }
    }

    [Parameter]
    public double FlipDelay { get; set; } = 0.0;

    /// <summary>Gets or sets the click callback.</summary>
    /// <value>The click callback.</value>
    [Parameter]
    public EventCallback<MouseEventArgs> Click { get; set; }
}