HTML5和CSS3技術的發展，使得我們能夠實現更加炫酷的圖片效果。以下是一些常用的HTML5和CSS3圖片效果代碼：

1. 圖片縮放效果

img:hover {
transform: scale(1.2);
}

這段代碼實現了當鼠標懸停在圖片上時，圖片會放大1.2倍的效果。注意transform屬性是CSS3新增的屬性，它可以改變元素的形狀，位置和大小等。

2. 圖片模糊效果

img.blur {
filter: blur(5px);
}

這段代碼實現了給圖片添加模糊效果。可以通過調整blur()函數的參數值來達到不同程度的模糊效果。

3. 圖片灰度效果

img.gray {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}

這段代碼實現了給圖片添加灰度效果。gray()函數的參數值表示灰度的程度，可以從0%到100%進行調整。

4. 圖片旋轉效果

img.rotate {
transform: rotate(45deg);
}

這段代碼實現了給圖片添加旋轉效果。rotate()函數的參數值表示旋轉的角度，可以從0deg到360deg進行調整。

5. 圖片陰影效果

img.shadow {
box-shadow: 10px 10px 10px #888;
}

這段代碼實現了給圖片添加陰影效果。box-shadow屬性的第一個參數表示陰影水平偏移量，第二個參數表示陰影垂直偏移量，第三個參數表示陰影模糊半徑，第四個參數表示陰影顏色。 以上就是一些常用的HTML5和CSS3圖片效果代碼。通過合理運用這些代碼，我們可以實現各種想要的圖片效果。