使用css3创建带有文本的图像列表，以查看IPAD

Question

大家好

需要帮助和指导，以使用CSS3再现Flash动画效果进行IPAD观看

我真的迷路了。 任何帮助或指导将不胜感激。

效果：

我正在看的效果可以描述如下：

1.我想显示n个图像作为条形码，即。 首先缩小。

2.所有图像大小相同。 并且所有比例均按比例缩小。

3.在鼠标悬停时，会发生以下情况：

（1）图像放大到原始大小

（2）最初按比例缩小的三个图像在按比例放大的图像的左侧向左移动20个像素。

（3）原来放大的三幅图像在放大的图像的右侧，每幅向右移动20个像素

（4）图像上方和下方的竖排文字被显示

4.必须使用css3 + javascript获得效果，而今天的触摸设备可以接受

5.最重要的是，如何使HOVER部分在IPAD上可行？

这是我尝试过的代码：

但是我想我只是迷路了。

<div id="project" class="project">
            <div id="name">IHM, QR</div>
            <div id="category">ARCHITECTURE</div>  
            <div id="image"><img src="uploads/ihm-thumb2.jpg" width="110" height="110" alt="ihm pusa road"></div> 
            <div id="city">New Delhi</div> 
        </div>

        <div id="project1" class="project">
            <div id="name">IHM, PR</div>
            <div id="category">ARCHITECTURE</div>  
            <div id="image"><img src="uploads/ihm-thumb1.jpg" width="110" height="110" alt="ihm pusa road"></div> 
            <div id="city">New Delhi</div> 
        </div>

CSS：

#project, #project1, .project {height: 300px; width: 110px; float: left; margin: 140px 10px 0px 0px; overflow: hidden; border:1px solid #fff; transform-origin: left bottom; -webkit-transform: scale(.1,.8); -webkit-transition: all 1s ease-in-out;} #project1 {margin-left: -100px;}#name, .name { width:20px; height: 20px; white-space:nowrap; -webkit-transform: rotate(-90deg); float: left;  margin-left: 30px; margin-top: 70px; opacity: 0;-webkit-transition-property: opacity;-webkit-transition-duration: 1s;transition-property: opacity;transition-duration: 1s;} #category, .category {width: 20px; height: 20px; float: left; white-space:nowrap; -webkit-transform: rotate(-90deg); margin-top: 70px; /*border:1px solid  #930;*/  opacity: 0;-webkit-transition-property: opacity;-webkit-transition-duration: 1s;transition-property: opacity;transition-duration: 1s;}.clear {clear: both; height: 1px; width: 1px;} #image, .image { width: 110px; height: 110px; margin-top: 100px; -webkit-transform-origin: left bottom; -webkit-transform: scale(.3,.8); -webkit-transition: all 1s ease-in-out; /* -webkit-transform-origin: left bottom;*/}#image img {max-width: 100%; max-height: 100%;}#city, .city { width:20px; height: 20px; -webkit-transform: rotate(-90deg); margin-top: 50px; white-space:nowrap; margin-left: 40px; /*border:1px solid  #930;*/  opacity: 0;-webkit-transition-property: opacity;-webkit-transition-duration: 1s;transition-property: opacity;transition-duration: 1s;} #project:hover  {-webkit-transform: scale(1); -webkit-transform-origin: left bottom;} #project:hover #name, #project:hover #category,#projtect:hover #city {opacity: 1;} #project:hover #image {-webkit-transform: scale(1);}

希望这一切有意义

期待任何指导

感谢所有人的期待

温暖的问候

尼丁