Un bucle cuadrático con CSS

2,331 Metehan

Remix Abrir en el editor Publica tu código

Recomendado

10 January 2026

Plantilla HTML de portafolio de desarrollador full stack

10 August 2024

Animación del reloj

14 May 2026

Mario 64

HTML

CSS

/* Genel Ayarlar */

body {

min-height: 100vh;

background: linear-gradient(135deg, #1a1a1a, #333);

display: flex;

align-items: center;

justify-content: center;

margin: 0;

font-family: "Poppins", sans-serif;

overflow: hidden;

perspective: 1000px;

}

/* Şekil Konteyneri */

.shape-container {

position: relative;

width: 300px;

height: 300px;

perspective: 1000px;

}

/* 3D Şekiller */

.shape {

position: absolute;

width: 100px;

height: 100px;

background: linear-gradient(135deg, #ff6347, #ff4500); /* Eski turuncu tonları */

border-radius: 12px;

box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);

transform-style: preserve-3d;

animation: rotateShape 6s infinite linear;

}

.shape:nth-child(1) {

top: 0;

left: 0;

transform: translateZ(50px);

}

.shape:nth-child(2) {

top: 0;

right: 0;

transform: translateZ(-50px);

background: #CFE1B9; /* Ortadaki şekil için #CFE1B9 rengi */

}

.shape:nth-child(3) {

bottom: 0;

left: 0;

transform: translateZ(100px);

background: linear-gradient(135deg, #1e90ff, #00bfff);

}

.shape:nth-child(4) {

bottom: 0;

right: 0;

transform: translateZ(-100px);

background: linear-gradient(135deg, #32cd32, #00ff7f);

}

@keyframes rotateShape {

0% {

transform: rotateX(0) rotateY(0);

}

100% {

transform: rotateX(360deg) rotateY(360deg);

}

/* Logo Alanı */

.logo {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%) rotateX(25deg);

width: 150px;

height: 150px;

background: radial-gradient(circle, #ff4500, #ff6347);

border-radius: 50%;

box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);

display: flex;

align-items: center;

justify-content: center;

}

.logo img {

display: none; /* Resmi kaldırdım */

}

/* Modern Buton */

.button {

position: absolute;

bottom: 10%;

left: 50%;

transform: translateX(-50%);

padding: 0.8rem 1.5rem;

font-size: 1.2rem;

font-weight: bold;

color: #fff;

background: linear-gradient(135deg, #ff4500, #ff6347);

border: none;

border-radius: 25px;

cursor: pointer;

box-shadow: 0 10px 20px rgba(255, 69, 0, 0.5);

transition: all 0.3s ease;

}

.button:hover {

background: linear-gradient(135deg, #ff6347, #ff4500);

transform: scale(1.1);

}