반응형
아래의 이미지와 같이 마우스 hover시 좌우로 기울이는 코드
img { border:1px solid #D4D4D4; padding:5px; }
img:hover{ border:1px solid #666666; filter:alpha(opacity=70); opacity:.7; box-shadow:0 0 10px rgba(0,0,0,.2);filter:alpha(opacity=100);opacity:1; -ms-transform:rotate(5deg);-webkit-transform:rotate(5deg);transform:rotate(5deg);transition:opacity .3s;-webkit-transition:opacity .3s;transition:opacity .3s; }
img:hover{ border:1px solid #666666; filter:alpha(opacity=70); opacity:.7; box-shadow:0 0 10px rgba(0,0,0,.2);filter:alpha(opacity=100);opacity:1; -ms-transform:rotate(5deg);-webkit-transform:rotate(5deg);transform:rotate(5deg);transition:opacity .3s;-webkit-transition:opacity .3s;transition:opacity .3s; }
- box-shadow:0 0 10px -- 그림자의 확산
- -ms-transform:rotate(5deg);-webkit-transform:rotate(5deg);transform:rotate(5deg) -- 기울기수치
반응형