3D 版的读者墙到现在应该不多见，最大的原因应该是兼容性的问题，我们应该放弃对太老的、过时的浏览器兼容性的工作，这种做法也是鼓励用户安装最新版本的浏览器，更好的体验 HTML5/CSS3 的优秀的特性。

Twitter 彻底的放弃了 IE6 和 IE7，bootstrap 对 IE7, IE8 支持都不是很好。而 Google Apps 在未来几周内将放弃对微软 IE9 的支持，这是 Google 一贯执行的产品支持政策，如果你还在修复 IE6，只能表示无语。 Salong 主题没有做任何浏览器兼容性的问题，绝大多数最新的浏览器都没有问题，IE9 也能正常浏览，但 CSS3 的动画效果等属性是没有，勇敢地放弃 IE9 以下的浏览器，这是笔者在制作主题中最爽的一件事。

随着浏览器的更新与性能的提升，不只 CSS3 的 3D 效果，相信更多的 HTML5/CSS3 的最新技术会融入到越来越多的网页中。

3D 读者墙，最大的特点是使用了 CSS3 的 3D 动画效果，主要是 CSS3 的透视视图与 3D 转换，下面简单的介绍下：

1 、复制主题下的 page.php 文件，重命名为：template-reader.php，将其中第一个<?php 替换为：

2 、在模板文件中查找：

在其下面添加 3D 读者墙 PHP 代码：

  1. <!-- 读者墙 -->
  2. <?php
  3.   $query="SELECT COUNT(comment_ID) AS cnt, comment_author, comment_author_url, comment_author_email FROM (SELECT * FROM $wpdb->comments LEFT OUTER JOIN $wpdb->posts ON ($wpdb->posts.ID=$wpdb->comments.comment_post_ID) WHERE comment_date > date_sub( NOW(), INTERVAL 24 MONTH ) AND user_id='0' AND comment_author_email != 'longyizaifei@163.com' AND post_password='' AND comment_approved='1' AND comment_type='') AS tempcmt GROUP BY comment_author_email ORDER BY cnt DESC LIMIT 36";
  4.   $wall = $wpdb->get_results($query);
  5.   $maxNum = $wall[0]->cnt;
  6.    foreach ($wall as $comment)
  7.   {
  8.     if( $comment->comment_author_url )
  9.     $url = $comment->comment_author_url;
  10.     else $url="#";
  11.     $r="rel='external nofollow'";
  12.     $imgsize="36";
  13.     $tmp = "<li><section ><div ><span ><img src='http://www.gravatar.com/avatar.php?gravatar_id=".md5( strtolower($comment->comment_author_email) )."&size=".$imgsize ."&d=identicon&r=G' /> ".$comment->comment_author." +".$comment->cnt."</span><div ><a target='_blank' href='".$url."'> 查看 ".$comment->comment_author." 的站点</a></div></div></section></li>";
  14.     $output .= $tmp;
  15.   }
  16.   $output = "<ul >".$output."</ul>";
  17.   echo $output ;
  18.   ?>
  19. <!-- 读者墙 end -->

如果不是用 HTML5 编写的站点，请把上面的 section 标签改成 div 。

3 、 3D 版的读者墙与网上的其它版本最大的区别是 CSS 样式，最新的 CSS3 特性在下面的 CSS 代码中都有注释：

  2. .reader-box .avatar,.reader .site a{ width: 170px; height: 36px; padding: 8px; display: block; border: 1px #fff solid; -webkit-box-shadow: 0 0 2px #ddd; -moz-box-shadow: 0 0 2px #ddd; box-shadow: 0 0 2px #ddd; }
  3. .reader .site a{ background-color: #fff; }
  4. .reader-box img { width:36px; height:36px; float: left; margin-right: 12px; }
  5. .reader { perspective: 800px;
  6.     width:188px; margin: 8px; float:left; }
  7. .reader-box { position:relative; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d;
  8.     -webkit-transition: 1s ease; -moz-transition: 1s ease; -ms-transition: 1s ease; -o-transition: 1s ease; transition: 1s ease;
  9.     text-align: center; line-height: 36px; }
  10. .reader .site { position:absolute; top:0; -webkit-transform: rotateY(182deg) translateZ(1px); -moz-transform: rotateY(182deg) translateZ(1px); -ms-transform: rotateY(182deg) translateZ(1px); -o-transform: rotateY(182deg) translateZ(1px); transform: rotateY(182deg) translateZ(1px);
  11.     color:#666; opacity:.0; -webkit-transition: 1s opacity; -moz-transition: 1s opacity; -ms-transition: 1s opacity; -o-transition: 1s opacity; transition: 1s opacity; ; }
  12. .reader:hover .reader-box{ -webkit-transform: rotateY(182deg); -moz-transform: rotateY(182deg); -ms-transform: rotateY(182deg); -o-transform: rotateY(182deg); transform: rotateY(182deg); ; }
  13. .reader:hover .site{ opacity:1; }

3D 版读者墙

经过测试大多数最新的浏览器：Firefox 、 Chrome 、 Safari 、 Opera 、 360 、猎豹等浏览器都是支持的，IE10 以上才支持，如果考虑 IE9 以下的浏览器兼容性，

笔者

觉得前端技术很难进步，即使有进步也苦了前端工程师。