Css3 ile transistion, transform gibi özellikler kullanarak ufak animasyonlar yapmak mümkün.
Yapacağımz örnekte sayfaya kutular çizip bu kutuların hover özelliğine bazı geçişler ve dönüşümler eklemek.
transform: rotate(derece); içine girilen derece (örn 45deg) kadar nesneyi döndürür.
transform: scale(değer); içine girilen değer (örn 1.5) kadar nesnenin boyutlarını deştirir.
1 den küçük bir değer girilirse nesne küçülür.
transform: skew(X,Y); içine girilen değerler ile nesneyi uzatır.
transform: translateX(-10px);transform: translateY(-10px); X veya Y konumunda nesneyinin pozisyonunu değiştirir.
Örnek bir çalışma yaparsak:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254" />
<title> CSS3 İle Döndürme, Büyütme ve Eğim Verme İşlemleri</title>
<style>
.cube {
position: relative;margin-top:190px;
}
.side {
height: 95px;
position: absolute;
width: 95px;
}
.top {
background: #9acc53;
text-align:center;
transform: rotate(-45deg) skew(15deg, 15deg);
}
.left {
background: #8ec63f;
text-align: center;
transform: rotate(15deg) skew(15deg, 15deg) translate(-50%, 100%);
}
.right {
background: #80b239;
text-align: center;
transform: rotate(-15deg) skew(-15deg, -15deg) translate(50%, 100%);
}
.div1 {
width: 140px;
height: 100px;
border: 2px solid #990000;
float: left;
background: #FF0000;
border-radius: 6px;
margin-left: 30px;
transition: transform .9s ease-in-out;
}
.div2 {
width: 140px;
height: 100px;
border: 2px solid #118811;
float: left;
background: #33EE33;
border-radius: 6px;
margin-left: 30px;
transition: transform .9s ease-in-out;
}
.div3 {
width: 140px;
height: 100px;
border: 2px solid #000088;
float: left;
border-radius: 6px;
background: #0000FF;
margin-left: 30px;
transition: transform .9s ease-in-out;
}
.div4 {
width: 140px;
height: 100px;
border: 2px solid #DD7711;
float: left;
border-radius: 6px;
background: #FF9944;
margin-left: 30px;
transition: transform 1.9s ease-in-out,background 1.9s ease-in-out,border 1.9s ease-in-out,margin-top 1.9s ease-in-out;
}
.div1:hover {
transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
.div2:hover {
transform: scale(-2);
-moz-transform: scale(-2);
-webkit-transform: scale(-2);
-o-transform: scale(-2);
-ms-transform: scale(-2);
}
.div3:hover {
transform: skew(10deg,20deg);
-moz-transform: skew(10deg,20deg);
-webkit-transform: skew(10deg,20deg);
-o-transform: skew(10deg,20deg);
-ms-transform: skew(10deg,20deg);
}
.div4:hover {
transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
background: #22FFFF;
border: 2px solid #11CCCC;
margin-top:100px;
}
</style>
</head>
<body>
<h1>CSS3 İle Döndürme, Büyütme ve Eğim Verme İşlemleri</h1><hr />
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<br />
<div class="cube"><hr /><h2>3D Küp</h2>
<figure class="side top">1</figure>
<figure class="side left">2</figure>
<figure class="side right">3</figure>
</div>
</body>
</html>
Örnek çalışmaya
buradan ulaşabilirsiniz.
