Back to Snippets

Isometric 3D Social Icons CSS

Create stunning 3D social media buttons. We use pure CSS isometric transforms, so you get an amazing hover effect which looks completely modern.

#css

#isometric

#3d

#social media

#icons

#hover effect

#animation

#modern ui

/HTML *CSS ()JS Output Live Updates

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #f3f4f6;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}

.iso-container {
  display: flex;
  gap: 40px;
}

.iso-item {
  position: relative;
  width: 80px;
  height: 80px;
  transform-style: preserve-3d;
  transform: rotateX(60deg) rotateZ(-45deg);
  cursor: pointer;
  transition: transform 0.3s ease;
}

.iso-item:hover {
  transform: rotateX(60deg) rotateZ(-45deg) translateZ(20px);
}

.iso-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: -1px 1px 2px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #3b82f6;
}

.iso-item:hover .iso-layer:nth-child(5) { 
  transform: translateZ(40px); 
  box-shadow: -20px 20px 20px rgba(0, 0, 0, 0.1); 
}

.iso-item:hover .iso-layer:nth-child(4) { 
  transform: translateZ(30px); 
  opacity: 0.8; 
}

.iso-item:hover .iso-layer:nth-child(3) { 
  transform: translateZ(20px); 
  opacity: 0.6; 
}

.iso-item:hover .iso-layer:nth-child(2) { 
  transform: translateZ(10px); 
  opacity: 0.4; 
}

.iso-item:hover .iso-layer:nth-child(1) { 
  transform: translateZ(0px); 
  opacity: 0.2; 
}

Isometric 3D Social Icons CSS

Share Code Snippet