forma 3D

Abrir en el editor Publica tu código

Recomendado

30 August 2024

Efecto de desplazamiento de tarjeta 3D

5 April 2025

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #1f1c2c, #928dab);
  font-family: 'Segoe UI', sans-serif;
}

.container {
  perspective: 1000px;
}

.form-box {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  border-radius: 20px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
  width: 320px;
  padding: 30px;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

.form-box:hover {
  transform: rotateY(10deg) rotateX(10deg) scale(1.03);
}

h2 {
  text-align: center;
  color: white;
  margin-bottom: 20px;
}

.input-group {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

label {
  color: #eee;
  margin-bottom: 5px;
}

input {
  padding: 10px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  outline: none;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  transition: background 0.3s ease;
}

input:focus {
  background: rgba(255, 255, 255, 0.4);
}

button {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: #00bcd4;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease;
}

button:hover {
  background: #0097a7;
}

forma 3D

Recomendado

Efecto de desplazamiento de tarjeta 3D

un sitio web de plataforma

Un código de ytr3d3

HTML

CSS

JS

Recomendado

Efecto de desplazamiento de tarjeta 3D

un sitio web de plataforma

Un código de ytr3d3

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS