<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????#div1{ ???????????width: 300px; ???????????height:300px; ???????????background-color: yellow;
/*弹性盒子设置垂直居中*/ ???????????display: flex; ???????????align-items: center; ???????} ???????img{ ???????????transition: all 1s ease; ???????} ???????img:hover{ ???????????-webkit-transform: rotate(180deg); ???????????-moz-transform: rotate(180deg); ???????????-ms-transform: rotate(180deg); ???????????-o-transform: rotate(180deg); ???????????transform: rotate(180deg); ???????} ???</style></head><body><div id="div1"> ???<div style="margin: auto"><img src="../img/H5.png" ></div></div><div id="div2"></div></body></html>
02.CSS动画示例-->鼠标悬停图片旋转
原文地址：http://www.cnblogs.com/ronghtp/p/7649716.html