扑克牌的轴心旋转

1、首先，我们先进入DW里面新建一个html文档，改一下title为扑克牌的轴心旋转，在body里面写一个div命名为pkbox用于放置扑克图片，然后在里面放置img标签，引入两张红黑的扑克再复制成为六个。

2、新建一个css文档命名为pk 然后返回html文档使用link标签引入css样式表。

3、现在css样式表里面写上通配符，设置margin，padding值为0；现在的基本效果就是图二。（以下所有的图二都是我缩小了页面的效果）

4、给类名为pkbox这个盒子设置宽高分别为150px和220px。我们大致的效果就是图二。

5、接下来我们就设置img标签的宽高为100%，我们要把扑克全部合在一起就需要给绝对定位 top值为0，left值为0（在img的父元素那里也就是pkbox这个类里面要给一个相对定位搭配使用）。效果见图二。

6、然后设置一下transtion（过渡）的内容：transform 2s，意思是过渡transform的时间为2s。然后旋转的轴心为右上角。

7、我们需要先调整一下整体的位置 不然等会看不到效果，在pkbox这个里面加上margin值为22%和45%；这样就在正中心了。

8、现在设置动画旋转，先选择类名为pkbox给它一个伪类：hover意思是鼠标滑过，然后选择到img也要给一个伪类：nth-of-type意思是选择到第几个img。这里我们需要一个一个去设置旋转的角度。

9、使用transform这个属性，rotate意思是角度然后后面加一个括号 括号里面写上我们需要的度数，deg代表度。基本上我们就能看到旋转一张的效果。

 

10、然后疯狂复制 一直复制六个 改一下nth-of-type里面的数字 和transform的度数就ok了。