ホバーで傾くbox

.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;
}

.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とか)

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル