1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.box{ position: absolute;/*場所の固定*/ width: 350px;/*横幅指定*/ height: 300px;/*縦幅指定*/ border: 1px solid #ddd;/*枠の太さ、種類、色*/ transform: rotate(5deg);/*どれぐらい傾けるか*/ transition: all 0.3s;/*傾く速度*/ } .box:hover{ position: absolute; width: 350px; height: 300px; border: 1px solid #ddd; transform: rotate(0deg);/*傾きをなくす*/ transition: all 0.3s; } |
親要素に入れれば、要素内も傾く。(rowとかcolumnとか)
子要素に入れればその要素だけが動くようになる。(textとかbuttonとか)
コメントを残す