CSS ile bir karesel döngü

1,909 Metehan

Open In Editor Publish Your Code

CSS ile bir karesel döngü

Recommended

29 December 2024

Alternatif bir Giriş sayfası

26 September 2025

CSS Loading Animation with Background Image

8 June 2025

A Code by alejandrokundrah

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);

}

JS