3D Küp Animasyon Yapımı - How to Make a 3D Cube Animation - HTML5 - CSS3 - Ders22
Bu video uygulamamızda üç boyutlu bir küp yaparak 360 derece dönmesini sağladık. Sadece HTML ve CSS kullanark oluşturulan bu animasyon gibi bir çok video uygulamamız için kanalımıza abone olmayı unutmayın.
HTML İÇERİĞİ:
<!DOCTYPE html>
<html>
<head>
<title>Video Background Yapımı</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<body>
<div id="anaDiv">
<div id="kutuDiv">
<div id="ön"><br>WEB SİTEM</div>
<div id="arka"><br>Abone</div>
<div id="sol"><br><br>Sayfamıza</div>
<div id="sağ">Olun</div>
<div id="üst"><br>HTML</div>
<div id="alt"><br><br>CSS</div>
</div>
</div>
</body>
</head>
</html>
CSS İÇERİĞİ:
body{
background: lightblue;
}
#anaDiv{
width: 300px;
height: 300px;
margin: 200px auto;
perspective: 800px;
}
#kutuDiv{
width: 300px;
transform-style: preserve-3d;
animation: rota 15s linear infinite;
}
#kutuDiv div{
position: absolute;
width: 300px;
height: 300px;
opacity: 0.8;
color: white;
font: 60px impact;
text-align: center;
}
#ön{
transform: translateZ(150px);
background: black;
}
#arka{
transform: rotateY(180deg) translateZ(150px);
background: #101010;
}
#sol{
transform: rotateY(-90deg) translateX(-150px);
transform-origin: left;
background: black;
}
#sağ{
transform: rotateY(90deg) translateX(150px);
transform-origin: right;
background: #101010;
}
#üst{
transform: rotateX(-90deg) translateY(-150px);
transform-origin: top;
background: black;
}
#alt{
transform: rotateX(90deg) translateY(150px);
transform-origin: bottom;
background: #101010;
}
@keyframes rota{
0%{ transform: rotateY(0deg); }
100%{ transform: rotateY(360deg); }
}
Yorumlar
Yorum Gönder