Profile Card 3D Hover Animation

CSS Profile Card 3D Hover Animation: Bringing Your Website to Life

In the world of web development, it’s essential to create engaging and interactive experiences for users. One way to accomplish this is through animations. An excellent example of an animation that can make your website more dynamic is the CSS Profile Card 3D Hover Animation.

The CSS Profile Card 3D Hover Animation is a creative way to showcase information about a person, a team, or a product on your website. When the user hovers over the card, it rotates in 3D, revealing more information and creating a sense of depth and interactivity. Here’s a breakdown of how to create this effect:

Step 1: Create the HTML and CSS structure

The first step is to create the HTML and CSS structure of the profile card. You can use a div container to hold all the elements of the card, including the profile image, name, and social media links. Then, you’ll need to add CSS styles to position the elements and create the card’s appearance.

Step 2: Add the hover effect

The magic of the CSS Profile Card 3D Hover Animation is in the hover effect. To create this effect, you’ll need to add CSS transitions and transforms. When the user hovers over the card, the transform property rotates the card in 3D, revealing more information. You can also add other effects like box shadows and opacity changes to enhance the animation.

Step 3: Customize the design

Once you’ve created the basic structure and hover effect, you can customize the design to match your website’s style. You can change the colors, fonts, and layout to create a unique look and feel for your profile cards.

The CSS Profile Card 3D Hover Animation is a great way to add a modern and interactive element to your website. It’s perfect for showcasing team members, testimonials, or product features. When done correctly, this animation can grab the user’s attention and keep them engaged on your website. So why not give it a try and see how it can take your website to the next level?

css code

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .wrapper{
        min-height: 100vh;
        background-color: #3a4184;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .box{
        margin: 20px;
    }
    .single-box{
        width: 300px;
        height: 300px;
        perspective: 1200px;
    }
    .box-content{
        width: 100%;
        height: 100%;
        position: relative;
        transform-style: preserve-3d;
        transform: translateZ(-150px);
        transition: all 1s;
    }
    .sides{
        position: absolute;
        width: 300px;
        height: 300px;
        text-align: center;
    }
    .side-1{
        transform: rotateY(0deg) translateZ(150px);
        z-index: 2;
        background-size: cover;
        background-position: center center;
    }
    .side-2{
        color: #f4f6f0;
        background-color: rgb(78, 161, 121);
        transform: rotateY(90deg) translateZ(150px);
    }
    .box:hover .box-content{
        transform: translateZ(-150px) rotateY(-90deg);
    }
    .content{
        display: flex;
        justify-content: center;
        flex-direction: column;
        height: 100%;
    }
    .content h2{
        font-family: alfa slab one;
        font-size: 25px;
    }
    .content p{
        font-size: 15px;
        line-height: 25px;
        font-family: 'Montserrat', sans-serif;
    }
    .socials{
        margin-top: 30px;
    }
    .socials i{
        margin: 0 15px;
    }
    
    @media (max-width:991px){
        .wrapper{
            flex-direction: column;
        }

    }
</style>

html code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    
</head>
<body>
    <div class="wrapper">
        <a href="#" class="box">
          <div class="single-box">
            <div class="box-content">
              <div class="sides side-1" style="background-image: url(img/1.jpg);"></div>
              <div class="sides side-2">
                <div class="content">
                  <h2>Rocky</h2>
                  <p>CSS Profile Card 3D Hover Animation is a popular technique used to create an interactive and engaging user interface for websites. </p>
                  <p class="socials">
                    <i class="fa fa-facebook"></i>
                    <i class="fa fa-youtube"></i>
                    <i class="fa fa-linkedin"></i>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </a>
        <a href="#" class="box">
          <div class="single-box">
            <div class="box-content">
              <div class="sides side-1" style="background-image: url(img/2.jpg);"></div>
              <div class="sides side-2">
                <div class="content">
                  <h2>venkatesh</h2>
                  <p>The CSS Profile Card 3D Hover Animation is a creative way to showcase information about a person</p>
                  <p class="socials">
                    <i class="fa fa-facebook"></i>
                    <i class="fa fa-youtube"></i>
                    <i class="fa fa-linkedin"></i>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </a>
        <a href="#" class="box">
          <div class="single-box">
            <div class="box-content">
              <div class="sides side-1" style="background-image: url(img/3.jpg);"></div>
              <div class="sides side-2">
                <div class="content">
                  <h2>jhon</h2>
                  <p>The magic of the CSS Profile Card 3D Hover Animation is in the hover effect. </p>
                  <p class="socials">
                    <i class="fa fa-facebook"></i>
                    <i class="fa fa-youtube"></i>
                    <i class="fa fa-linkedin"></i>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </a>
      </div>

    
</body>
</html>

here is the html code with add css code for styling purpose

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    .wrapper{
        min-height: 100vh;
        background-color: #3a4184;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .box{
        margin: 20px;
    }
    .single-box{
        width: 300px;
        height: 300px;
        perspective: 1200px;
    }
    .box-content{
        width: 100%;
        height: 100%;
        position: relative;
        transform-style: preserve-3d;
        transform: translateZ(-150px);
        transition: all 1s;
    }
    .sides{
        position: absolute;
        width: 300px;
        height: 300px;
        text-align: center;
    }
    .side-1{
        transform: rotateY(0deg) translateZ(150px);
        z-index: 2;
        background-size: cover;
        background-position: center center;
    }
    .side-2{
        color: #f4f6f0;
        background-color: rgb(78, 161, 121);
        transform: rotateY(90deg) translateZ(150px);
    }
    .box:hover .box-content{
        transform: translateZ(-150px) rotateY(-90deg);
    }
    .content{
        display: flex;
        justify-content: center;
        flex-direction: column;
        height: 100%;
    }
    .content h2{
        font-family: alfa slab one;
        font-size: 25px;
    }
    .content p{
        font-size: 15px;
        line-height: 25px;
        font-family: 'Montserrat', sans-serif;
    }
    .socials{
        margin-top: 30px;
    }
    .socials i{
        margin: 0 15px;
    }
    
    @media (max-width:991px){
        .wrapper{
            flex-direction: column;
        }
    }
</style>
    
</head>
<body>
    <div class="wrapper">
        <a href="#" class="box">
          <div class="single-box">
            <div class="box-content">
              <div class="sides side-1" style="background-image: url(img/1.jpg);"></div>
              <div class="sides side-2">
                <div class="content">
                  <h2>Rocky</h2>
                  <p>CSS Profile Card 3D Hover Animation is a popular technique used to create an interactive and engaging user interface for websites. </p>
                  <p class="socials">
                    <i class="fa fa-facebook"></i>
                    <i class="fa fa-youtube"></i>
                    <i class="fa fa-linkedin"></i>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </a>
        <a href="#" class="box">
          <div class="single-box">
            <div class="box-content">
              <div class="sides side-1" style="background-image: url(img/2.jpg);"></div>
              <div class="sides side-2">
                <div class="content">
                  <h2>venkatesh</h2>
                  <p>The CSS Profile Card 3D Hover Animation is a creative way to showcase information about a person</p>
                  <p class="socials">
                    <i class="fa fa-facebook"></i>
                    <i class="fa fa-youtube"></i>
                    <i class="fa fa-linkedin"></i>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </a>
        <a href="#" class="box">
          <div class="single-box">
            <div class="box-content">
              <div class="sides side-1" style="background-image: url(img/3.jpg);"></div>
              <div class="sides side-2">
                <div class="content">
                  <h2>jhon</h2>
                  <p>The magic of the CSS Profile Card 3D Hover Animation is in the hover effect. </p>
                  <p class="socials">
                    <i class="fa fa-facebook"></i>
                    <i class="fa fa-youtube"></i>
                    <i class="fa fa-linkedin"></i>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </a>
      </div>

    
</body>
</html>

for more content related to web development go to azcodinghub.com

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top