利用HTML5制作图片放大效果的例子

给每个后续的元素添加tabindex值，图像可以通过Tab很好的键盘！
Images
图像将是“全尺寸”的。

这意味着他们将缩减为正常显示在页面上，并扩大了我们的神奇的CSS扩展。因为浏览器不支持这种潜在的浪费带宽。权衡的是你的回调。
CSS代码
正常显示：
figure {
 
  float: left;
  margin: 0 20px 0 0;
  background: white;
  border: 10px solid white;
  -webkit-box-shadow: 0 3px 10px #ccc;
  -moz-box-shadow: 0 3px 10px #ccc;
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 1s ease;
  position: relative;
}
figcaption {
  text-align: center;
  display: block;
  font-size: 12px;
  font-style: italic;
}
figure img {
  width: 100%; /* Scale down */
}
:focus不是CSS3的部分，但shadows, transforms, 和 transitions是。悬停状态将图像旋转一点和:focus样式（当图像被点击），将它扩大，转动一次，并确保它在顶部的 z-index。
figure:hover {
  -webkit-transform: rotate(-1deg); -moz-transform: rotate(1deg);
  -webkit-box-shadow: 0 3px 10px #666; -moz-box-shadow: 0 3px 10px #666;
}
figure:focus {
  outline: none;
  -webkit-transform: rotate(-3deg) scale(2.5); -moz-transform: rotate(-3deg) scale(2.5);
   -webkit-box-shadow: 0 3px 10px #666; -moz-box-shadow: 0 3px 10px #666;
  z-index: 9999;
}

浏览器的兼容性

HTML5的contenteditable属性是在Firefox 3.6 + 4 +支持，Safari，Chrome，Opera（10.6只试验了）。注意属性将级联到所有的子元素。在我们的演示，具有图像和图标题被编辑并没有多大意义，所以我们可以把它关掉单独对他们。

 
 

如果你忘了关掉图像的editablity，Firefox可以看起来有点时髦的给你调整处理图像。更新：另一个理由来使用tabindex而不是。

opera方面的子元素不可编辑，但仍然运行在他们的拼写检查，将红色下划线单词拼错，发现可能会有点怪。
我们的演示还依赖转变为“工作”，虽然，它只在当前的WebKit浏览器和火狐4支持+。支持Firefox 3.6的变换而不是过渡。
一是图像只是不扩大，这当然是没有什么大不了的。