3D Floating Icons Animation Using HTML & CSS | Modern UI Effect | 1-Minute Tutorial – Amit Tutorial

Описание: Learn how to create a stunning 3D Floating Icons Animation using pure HTML and CSS in this quick, beginner-friendly tutorial. This effect is modern, lightweight, and perfect for landing pages, portfolio websites, app UI sections, hero headers, feature highlights, and animation-based designs.

In this video by Amit Tutorial, you will learn:
• How to design clean icon containers using HTML and CSS
• How to create realistic 3D floating effects using transform, perspective, and keyframe animations
• How to add soft shadows, depth, and floating motion
• How to use scale, rotate, and translate for smooth 3D movements
• How to make icons hover elegantly with subtle bounce and glow
• How to keep the animation loop smooth for Shorts/Reels content

This 3D Floating Icons effect works in:
✔ Landing pages
✔ Product/feature showcase sections
✔ Portfolio hero banners
✔ App UI/Website UI mockups
✔ Modern minimal website layouts

The best part?
No JavaScript required — everything is done using pure CSS.

If you're learning HTML, CSS, JavaScript, UI design, or front-end development, this project is perfect for practice.

Full code is included in the description.

📚 More tutorials, notes & projects:
https://www.amittutorial.com

If you enjoyed the tutorial, please LIKE, SHARE, and SUBSCRIBE to Amit Tutorial for more 1-minute UI effects, HTML CSS tricks, JavaScript projects, animations, responsive designs, and Web Development content.


🧩 SAFE HTML
!DOCTYPE html
html lang="en"
head
meta charset="utf-8"
meta name="viewport" content="width=device-width, initial-scale=1"
title 3D Floating Icons - Amit Tutorial /title
link rel="stylesheet" href="style.css"
head

body
div class="container"
div class="icon i1" HTML /div
div class="icon i2" CSS /div
div class="icon i3" JS /div
/div
/body
/html

🎨 SAFE CSS
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background:#0d1226;
font-family:sans-serif;
}

.container{
display:flex;
gap:30px;
}

.icon{
width:80px;
height:80px;
font-size:22px;
font-weight:700;
display:flex;
align-items:center;
justify-content:center;
border-radius:20px;
color:#fff;
background:linear-gradient(135deg,#7afcff,#8a7aff);
box-shadow:0 20px 40px rgba(122,252,255,0.25);
animation:float 3s ease-in-out infinite;
transform-style:preserve-3d;
}

.icon.i2{ animation-delay:.4s }
.icon.i3{ animation-delay:.8s }

@keyframes float{
0%{ transform: translateY(0) rotateX(0deg) rotateY(0deg) }
50%{ transform: translateY(-22px) rotateX(8deg) rotateY(-8deg) }
100%{ transform: translateY(0) rotateX(0deg) rotateY(0deg) }
}