CSS 3d Hover Effect: Interactive 3D Social Media Icons using HTML and CSS

In this tutorial, we'll guide you through the process of creating stunning 3D social media icons3D social media icons with hover animations using HTML and CSS. These icons provide a dynamic and interactive element to your web pages, enhancing user experience and engagement. Let's dive in.

Also Read: Build an Interactive Bottom Navigation Menu using HTML CSS and JS

HTML Structure

The foundation of our 3D social media icons starts with a clean HTML structure. The main components are an unordered list to hold each social media item and individual list items for each icon.

<div class="main-container">
        <ul class="icon-list">
            <li class="item">
                <span class="icon-box"><span class="icon bi bi-instagram"></span></span>
                <span class="count">80K</span>
                <a href="#">Instagram</a>
            </li>
            <li class="item">
                <span class="icon-box"><span class="icon bi bi-youtube"></span></span>
                <span class="count">50K</span>
                <a href="#">Youtube</a>
            </li>
            <li class="item">
                <span class="icon-box"><span class="icon bi bi-facebook"></span></span>
                <span class="count">90K</span>
                <a href="#">Facebook</a>
            </li>
            <li class="item">
                <span class="icon-box"><span class="icon bi bi-pinterest"></span></span>
                <span class="count">20K</span>
                <a href="#">Pinterest</a>
            </li>
            <li class="item">
                <span class="icon-box"><span class="icon bi bi-linkedin"></span></span>
                <span class="count">60K</span>
                <a href="#">Linkedin</a>
            </li>
        </ul>
</div>

We define an unordered list (<ul>) with the class icon-list that serves as a container for our social media icons. Each list item (<li>) within this container represents a social media platform.

• Icon Box: Within each list item, there is a span element (.icon-box) that serves as a container for the icon. This span is styled to appear as a 3D box that rotates and moves on hover.
• Icon: Inside the .icon-box, another span element contains the actual social media icon, provided by Bootstrap Icons.
• Follower Count: Each list item also includes a span element with the class count, which displays the follower count. This element appears above the icon box when the user hovers over the icon.
• Link: Finally, an anchor tag (<a>) within each list item serves as a link to the corresponding social media page. This link is revealed below the icon box on hover.

CSS Styling

CSS is crucial for creating the 3D effect and hover animations 3D effect and hover animations that bring our icons to life. The styles define the layout, appearance and interactive behaviors of the icons.

@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css');

.main-container {
    display: flex;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    min-width: 320px;
}

.icon-list {
    display: flex;
    gap: 15px;
    font-family: 'Calibri';
}

.item {
    position: relative;
    list-style: none;
}

.icon-box {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    transition: 0.5s ease-in-out;
    color: rgb(238, 238, 238);
    border: 1px solid rgba(111, 111, 111, 0.37);
}

.item:hover .icon-box {
    transform: rotateX(60deg) perspective(550px) translateY(2px);
    box-shadow: 0px 10px 2px rgba(98, 98, 98, 0.384);
}

.icon {
    transition: transform .3s;
}

.item:hover .icon {
    transform: translate3d(0px, 0px, 15px) rotateX(-75deg);
}

.count {
    position: absolute;
    left: 50%;
    opacity: 0;
    top: 0;
    transition: .6s;
    padding: 4px 10px;
    border-radius: 5px;
    visibility: hidden;
    background: #161616;
    color: rgb(255, 255, 255);
    transform: translate(-50%, 0px);
}

.count::after {
    content: '\F229';
    position: absolute;
    left: 50%;
    bottom: 0;
    color: #161616;
    font-family: 'bootstrap-icons';
    transform: translate(-50%, 65%);
}

.item:hover .count {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, -50px);
}

.item a {
    position: absolute;
    bottom: 0;
    opacity: 0;
    left: 50%;
    color: white;
    transition: .5s;
    padding: 10px 0;
    visibility: hidden;
    text-decoration: none;
    transform: translate(-50%, 0);
}

.item:hover a {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 40px);
}

.item a:hover {
    text-decoration: underline;
}

• Icon Box: The .icon-box span is styled with fixed dimensions, a circular shape (using border-radius) and centered content. The transform-style: preserve-3d property ensures that 3D transformations are properly rendered. A transition property is applied to create smooth animations.
• Hover Effect: When a user hovers over an icon, the .icon-box rotates and moves, creating a 3D effect. This is achieved using CSS transforms and transitions.
• Icon Styling: The icon itself also moves slightly in 3D space on hover, enhancing the interactive feel.
• Follower Count Styling: The count span is absolutely positioned above the icon box. Initially, it is hidden and becomes visible with a sliding animation when the user hovers over the icon.
• Link Styling: The anchor tag (a) is also absolutely positioned, but below the icon box. It is initially hidden and slides up into view on hover. The text is styled to be white and it changes to underline on hover for better user interaction.

Adding Interactivity with CSS

The interactivity of the icons is achieved solely through CSS. By leveraging the hover pseudo-class and transition properties, we create a dynamic user experience without the need for JavaScript.

When the user hovers over an icon, several visual changes occur:

• Icon Box Transformation: The "icon-box" rotates and moves slightly, creating a 3D effect.
• Icon Movement: The icon within the "icon-box" moves forward in 3D space.
• Follower Count Reveal: The count span slides up and becomes visible, displaying the follower count.
• Link Reveal: The anchor tag (a) slides up and becomes visible, providing a link to the corresponding social media page.

By combining these effects, we create a seamless and engaging hover animation that enhances the user experience.

In this tutorial, we have explored how to create 3D social media icons create 3D social media icons with hover animations using HTML and CSS. We started with a simple and clean HTML structure, then styled the icons and their interactions using CSS. The result is a set of interactive and visually appealing social media icons that can enhance any web page.

Also Read: Ultimate Weather Web App using HTML CSS JavaScript | Fully Responsive 

This technique can be a great addition to your website, providing a modern and engaging user experience. Experiment with different icons, styles and animations to make this effect your own and enhance your web design with dynamic 3D icons.

Download