初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

CSS3 文字や画像を拡大する

文字や画像にhoverした時にその対象物を拡大する方法を記述します。
f:id:bellsmarket:20150430013137p:plain:w300f:id:bellsmarket:20150430013141p:plain:w300

<body>
<div id="box1"></div>
</body>
</html>

拡大する

#box1{
  width:200px;
  height:200px;
  margin:50px auto;
  background:blue;
    -moz-transition: -moz-transform 0.3s linear;
    -webkit-transition: -webkit-transform 0.3s linear;
    -o-transition: -o-transform 0.3s linear;
    -ms-transition: -ms-transform 0.3s linear;
    transition: transform 0.3s linear;
}
#box1:hover {
  -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -o-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);	
}
topへ戻る