用css写出图片3D旋转

html结构为：

                <figure class="icon-cards">
                    <div class="icon-cards__content">
                        <a  class="icon-cards__item"  href="javascript:;">
                           <img src="__CDN__/assets/img/index1.png" alt="" /> 
                        </a>
                        <a  class="icon-cards__item"  href="/index/index/join">
                            <img src="__CDN__/assets/img/index2.png" alt="" />
                        </a>
                        <a  class="icon-cards__item"  href="javascript:;">
                          <img src="__CDN__/assets/img/index3.png" alt="" />  
                        </a>
                    </div>
                </figure>

css代码为

.icon-cards {
   
	position: absolute;
	top: 50%;
	left: 28%;
	width: 405px;
	height: 330px;
	-webkit-perspective: 800px;
	perspective: 800px;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.icon-cards__content {
   
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-transform-style: preserve-3d;
	transform-style: