How to animate a rotating a panel?

[Nick Lau]

Using the dashboard component, I'd like to have 2 panels over each other and with an call to action, the panel would rotate over and reveal the panel underneath. In the attached gif, I've demonstrated that I can have two child containers (divs) rotate and reveal the other but I'd like the <DashboardLayoutPanel> element to appear to rotate to give it a seamless look and feel. Would it be possible?

[Vishwanathan Muruganantham]

Hi Nick,

Greetings from Syncfusion support.

We have reviewed your query and understand that you need to flip the panel content on hover to display the back side content. To achieve this effect, we will utilize the CSS transform property. This property allows us to apply a 3D rotation to the panel, creating a smooth horizontal flip when the panel is hovered over. By setting up the appropriate CSS styles, we can ensure that the front side of the panel is visible by default, and the back side is revealed seamlessly upon hovering.

Refer to the code snippet below for reference.

….

 

<SfDashboardLayout Columns="6">

    <DashboardLayoutPanels>

        <DashboardLayoutPanel SizeX="1" SizeY="1" Row="0" Column="0">

            <ContentTemplate>

                <div class="card-container">

                    <div class="flip-card">

                        <!-- Front Side -->

                        <div class="flip-card-front">

                            <h4>Front Side</h4>

                            <p>This is the front side of the card.</p>

                        </div>

                        <!-- Back Side -->

                        <div class="flip-card-back">

                            <h4>Back Side</h4>

                            <p>This is the back side of the card.</p>

                         </div>

….

 

<style>

    .card-container {

        perspective: 1000px;

        height: 100%;

    }

 

    .flip-card {

        position: relative;

        width: 100%;

        height: 100%;

        transition: transform 0.6s;

        transform-style: preserve-3d;

    }

 

    .e-panel:hover .flip-card {

        transform: rotateY(180deg);

    }

 

    .flip-card-front,

    .flip-card-back {

        position: absolute;

        width: 100%;

        height: 100%;

        backface-visibility: hidden;

        color: white;

        padding: 20px;

    }

 

    .flip-card-front {

        background-color: #007bff;

    }

 

    .flip-card-back {

        background-color: #28a745;

        transform: rotateY(180deg);

    }

 

</style>

Sample: attached as zip file.

Please check the sample and let us know if you need any further assistance.

Best Regards,
Vishwanathan

Attachment: BlazorDashboard_709eb07.zip