CSS旋轉縮放

<style type="text/css">
figure{
float: left;
}
.test1{
border-radius: 0px;
height: 200px;
width: 200px;
overflow: hidden;
ransition-property: border-radius;
transition-duration: .5s;
transition-delay: .5s;
transition: all 1s;
}
.test1:hover{
border-radius: 200px;
box-shadow:0px 0px 22px #ffc8bd;
}
.test2{
transition-duration: .5s;
transition-delay: .5s;
}
.test2:hover{
transform: scale(1.5);
box-shadow:0px 0px 22px #ffc8bd;
}
.test3{
transition-duration: .5s;
transition-delay: .5s;
}
.test3:hover{
transform: rotate(45deg);
box-shadow:0px 0px 22px #ffc8bd;
}
.test4 img{
transition-duration: .5s;
transition-delay: .5s;
opacity: 1;

}
.test4 img:hover{
opacity: 0.5;
box-shadow:0px 0px 22px #ffc8bd;
}</style>

<figure style="margin-left: 130px;" class="test1">
<img src="images/user-3.jpg" width="200px" height="200px"/>
</figure>
<figure class="test2">
<img src="images/user-3.jpg" width="200px" height="200px"/>
</figure>
<figure class="test3">
<img src="images/user-3.jpg" width="200px" height="200px"/>
</figure>
<figure class="test4">
<img src="images/user-3.jpg" width="200px" height="200px"/>
</figure>

四張圖片，分別都是會伴隨盒子陰影。

設置滑鼠移上時，四張圖像的過渡或變形效果。其中，第一張為直角邊框變為圓角邊框的過渡效果；第二幅為圖片逐漸放大的過渡效果；第三張為圖片旋轉的變形效果；第四張為圖片透明度逐漸變為0的過渡效果