html时钟翻牌效果,前端开发 翻牌效果

前端高级开发视频|前端开发做单个页面|前端开发用低压还是标压处理器

思路：

最基本的思路：点击一张图片时，该张图片就要隐藏掉，把下方的图片显示出来。

效果：翻牌的效果，以图片中轴为基准，实现旋转的翻牌。

方法：

1、定义一个 class=”draw” 的 div 容器，该 div 里面包含一个有4个 li 的 ul 列表。(你喜欢几个都行，计算好距离就好。)

2、每个 li 都有自己的 id ，里面再定义一个 div 容器，起一个统一的 class ，在这里我取 class=”default”，然后在这个 div 之后，再定义一个 img ，img引入图片。

3、设置每个元素的

注意：第6点中的 left:200px; 是通过400/2得出来的。这个200px的作用就是，当图片显示时，在图片的宽度变成400px的过程中，将图片从 left:200px 移动到 left:0 的位置，就有一个

图片是从中间往两边伸展的效果了。这才是最根本的。

到这里，

[code].draw{ background-color:#green; border-radius:5px; width:1000px; height:400px; margin:0 auto;}

.draw ul{padding:22px 0;}

.draw ul li{width:400px; height:310px; margin:0 50px; float:left; display:inline; position:relative; cursor:pointer;}

.