CSS3制作icon旋转效果

鼠标移上去看看. mouse move to over follow:

    
.demo li{width: 48px;float: left;display: inline;margin-right: 18px;text-align: center;overflow: hidden;}
.demo a,.demo i{display: block;}
.demo a:hover i{-webkit-transform: rotateY(360deg);-moz-transform: rotateY(360deg);-ms-transform: rotateY(360deg);-o-transform: rotateY(360deg);transform: rotateY(360deg);}
.demo i{width: 46px;height: 46px;background: red;margin: 0 auto 4px;-webkit-transition: all 1s;-moz-transition: all 1s;-ms-transition: all 1s;transition: all 1s;}
    <div class="demo clearfix">
        <ul>
            <li>
                <a href="#">
                    <i class="icon1"></i>
                    <span class="title">客户端</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="icon1"></i>
                    <span class="title">客户端</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="icon1"></i>
                    <span class="title">客户端</span>
                </a>
            </li>
        </ul>
    </div>