Merhaba arkadaşlar bu gün sizlere animasyonlu kart yapımını göstereceğim.
Öncelikle html tarafında css dosyamızı iceri aktarıp kartlarımızı tanımlıyoruz.
Ardından css dosyamıza geçip kodlamamıza başlayalım.
Gövdemizin arkaplan rengini ve pozisyonunu belirledikten sonra yazı stilimizide belirtiyoruz.
Container divimizde ise flex-wrap'ı wrap yaparak öğeleri gerektiğinde birden fazla satırda yukarıdan aşağı doğru listeliyoruz.
Card divimizi relative yapıyoruz. ve transition olarak süresini 1 saniye yapıyoruz. Hover yani üzerine gelindiğinde ise rotasını -10 yapıyoruz ve box'ın konumunu belirliyoruz.
Kartımızdaki resmin bulunduğu alanın görünümünü ayarlayıp çerçevesini belirliyoruz. Ve hover olduğunda konumunu belirliyoruz. Ardından resmimizin kart içinde nasıl gözükeceğini belirtiyoruz.
Son olarak cartımızın üstüne gelince açılan kısmın görünüşünü ayarlayıp pozisyonunu absolute yapıyoruz.
Artık efektif bir kartın nasıl yapıldığını ve y ekseninde ayna görüntüsünün nasıl verildiğini öğrendik.
Yeni makalelerde tekrar görüşmek üzere. İyi Forumlar.
Öncelikle html tarafında css dosyamızı iceri aktarıp kartlarımızı tanımlıyoruz.
HTML:
<html>
<head>
<link href="css/cardcss3.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="card">
<div class="imgBox">
<img src="img/2.jpg" width="100%">
</div>
<div class="details">
<h2>'CaptainKanka</h2><br><p>Web Developer</p>
</div>
</div>
<div class="card">
<div class="imgBox">
<img src="img/2.jpg" width="100%">
</div>
<div class="details">
<h2>'CaptainKanka</h2><br><p>Web Developer</p>
</div>
</div>
<div class="card">
<div class="imgBox">
<img src="img/2.jpg" width="100%">
</div>
<div class="details">
<h2>'CaptainKanka</h2><br><p>Web Developer</p>
</div>
</div>
</div>
</body>
</html>Ardından css dosyamıza geçip kodlamamıza başlayalım.
CSS:
body
{
margin:0;
padding:0;
background:#010615;
font-family:'Quicksand', sans-serif;
}
.container
{
max-width:1000px;
margin:100px auto;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}Gövdemizin arkaplan rengini ve pozisyonunu belirledikten sonra yazı stilimizide belirtiyoruz.
Container divimizde ise flex-wrap'ı wrap yaparak öğeleri gerektiğinde birden fazla satırda yukarıdan aşağı doğru listeliyoruz.
CSS:
.card
{
position:relative;
margin:20px 0;
width:300px;
height:300px;
background:#fff;
transform-style:preserve-3d;
transform: perspective(2000px);
transition: 1s;
box-shadow:inset 300px 0 50px rgba(0,0,0,.5);
}
.card:hover
{
z-index:1000;
transform:perspective(2000px) rotate(-10deg);
box-shadow:inset 20px 0 50px rgba(0,0,0,.5);
}Card divimizi relative yapıyoruz. ve transition olarak süresini 1 saniye yapıyoruz. Hover yani üzerine gelindiğinde ise rotasını -10 yapıyoruz ve box'ın konumunu belirliyoruz.
CSS:
.card .imgBox
{
position:relative;
width:100%;
height:100;
border:1px solid #000;
box-sizing:border-box;
transform-origin:left;
z-index:1;
transition:1s;
}
.card:hover .imgBox
{
transform: rotateY(-135deg);
}
.card .imgBox .img
{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
}
CSS:
.card .details
{
position: absolute;
top:0;
left:0;
box-sizing:border-box;
padding:20px;
}Son olarak cartımızın üstüne gelince açılan kısmın görünüşünü ayarlayıp pozisyonunu absolute yapıyoruz.
Artık efektif bir kartın nasıl yapıldığını ve y ekseninde ayna görüntüsünün nasıl verildiğini öğrendik.
Yeni makalelerde tekrar görüşmek üzere. İyi Forumlar.
