The document contains CSS code to apply transitions and rotations to images on hover. Images within different ID tags will rotate at different speeds and angles on hover: #socialicons images rotate 70 degrees in 0.2 seconds, #socialicons1 images rotate 360 degrees in 0.8 seconds, and #socialicons2 images rotate -360 degrees in 0.5 seconds. The HTML portion then displays social media icons with these IDs that will rotate on hover as defined by the CSS.

1. 1. <style>
2. p#socialicons img { -moz-transition: all 0.2s ease-in-out; -
webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s
ease-in-out; -ms-transition: all 0.2s ease-in-out; transition:
all 0.2s ease-in-out;}
3. p#socialicons img:hover { -moz-transform: rotate(70deg); -
webkit-transform: rotate(70deg); -o-transform: rotate(70deg); -
ms-transform: rotate(70deg); transform: rotate(70deg);}
4. p#socialicons1 img { -moz-transition: all 0.8s ease-in-out; -
webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s
ease-in-out; -ms-transition: all 0.8s ease-in-out; transition:
all 0.8s ease-in-out;}
5. p#socialicons1 img:hover { -moz-transform: rotate(360deg); -
webkit-transform: rotate(360deg); -o-transform: rotate(360deg);
-ms-transform: rotate(360deg); transform: rotate(360deg);}
6. p#socialicons2 img { -moz-transition: all 0.5s ease-in-out; -
webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s
ease-in-out; -ms-transition: all 0.5s ease-in-out; transition:
all 0.5s ease-in-out;}
7. p#socialicons2 img:hover { -moz-transform: rotate(-360deg); -
webkit-transform: rotate(-360deg); -o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg); transform: rotate(-
360deg);}</style>
8.
9. <center><p id="socialicons">
10. <a href="https://www.facebook.com/androidposts"
target="_blank"><img border="0" src="http://4.bp.blogspot.com/-
_M_lp0j01CQ/UO_5dnRZTcI/AAAAAAAAAUs/c9Lrb2CuYm8/s1600/bloggertrix-
facebook.png" /></a>

2. 11. <a href="https://twitter.com/idealsofotnic"
target="_blank"><img border="0" src="http://2.bp.blogspot.com/-
UzH2vuiqgyo/UO_5e-yvJFI/AAAAAAAAAU8/Awu1UTmLBEs/s1600/bloggertrix-
twitter.png" /></a>
12. <a href="http://www.stumbleupon.com/stumbler/idealsoftonic"
target="_blank"><img border="0" src="http://4.bp.blogspot.com/-
eb7uVLm6raA/UO_5dxMeyNI/AAAAAAAAAUw/xM18Th5dnJs/s1600/bloggertrix-
stumbleupon.png" /></a>
13. <a href="http://feeds.feedburner.com/RexHacker"
target="_blank"><img border="0" src="http://3.bp.blogspot.com/-
2AeesYSvx1k/UO_5d_3Sl7I/AAAAAAAAAU0/PVwCH3Ihxdo/s1600/bloggertrix-
rss.png" /></a></p></center>