3d

1,676 mambetov1237.b

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Recomendado

30 March 2025

Un código de ytr3d3

22 April 2025

Abeja realista en 3D

22 September 2025

Juego de cubo 3D HTML con estadísticas y personalización

HTML

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #212121;
}
.parent {
  width: 300px;

padding: 20px;
  perspective: 1000px;
}
.card {
  padding-top: 50px;
  border: 3px solid rgb(255, 255, 255);
  transform-style: preserve-3d;
  background: linear-gradient(135deg, #0000 18.75%, #f3f3f3 031.25%, #0000 0),
    repeating-linear-gradient(45deg, #f3f3f3 -6.25% 6.25%, #ffffff 0 18.75%);
  background-size: 60px 60px;
  background-position: 0 0, 0 0;
  background-color: #f0f0f0;
  width: 100%;
  box-shadow: rgba(142, 142, 142, 0.3) 0px 30px 30px -10px;
  transition: all 0.5s ease-in-out;
}
.card:hover {
  background-position: -100px 100px, -100px 100px;
  transform: rotate3d(0.5, 1, 0, 30deg);
}
.content-box {
  background: rgb(10, 168, 235);
  transition: all 0.5s ease-in-out;
  padding: 60px 25px 25px 25px;
  transform-style: preserve-3d;
}
.content-box .card-title {
  display: inline-block;
  color: white;
  font-size: 25px;
  font-weight: 900;
  transition: all 0.5s ease-in-out;
  transform: translate3d(0px 0px 50px);
}
.content-box .card-title:hover {
  transform: translate3d(0px 0px 60px);
}
.content-box .card-content {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  color: #f2f2f2;
  transition: all 0.5s ease-in-out;
  transform: translate3d(0px 0px 30px);
}
.content-box .card-content:hover {
  transform: translate3d(0px 0px 60px);
}
.content-box .see-more {
  cursor: pointer;
  margin-top: 1rem;
  display: inline-block;
  font-weight: 900;
  font-size: 9px;
  text-transform: uppercase;
  color: blue;
  background: white;
  padding: 0.5rem 0.7rem;
  transition: all 0.5s ease-in-out;
  transform: translate3d(0px 0px 20px);
}
.content-box .see-more:hover {
  transform: translate3d(0px 0px 60px);
}
.date-box {
  position: absolute;
  top: 30px;
  right: 30px;
  height: 60px;
  background-color: white;
  border: 1px solid blue;
  padding: 10px;
  transform: translate3d(0px 0px 80px);
  box-shadow: rgba(100, 100, 111, 0.2) 0px 17px 10px -10px;
}
.date-box span {
  display: block;
  text-align: center;
}
.date-box .moth {
  color: blue;
  font-size: 9px;
  font-weight: 700;
}
.date-box .date {
  font-size: 20px;
  font-weight: 900;
  color: blue;
}