用伪类做图片旋转

 

首先我们来看一下HTML大概的布局

   

还未加伪类时还是图片没有任何的效果，加了伪类后图片中间竖直两边旋转特定的度数，可以做到旋转的效果。

 

下面是css样式和伪类中特定的一些效果样式

 

主要讲的是上面代码中的transform属性它可以在css3中进行2D转换使元素改变形状、尺寸和位置，对元素进行位移、缩放、移动、拉长或者拉伸。

perspective元素的描述是元素距离视图的距离，以像素计。

rotateY() 方法的意思是沿着Y轴旋转。

deg是度数的意思

原本图片为旋转时旋转的度数是0deg也就是0度。

通过伪类选择器：hover设置鼠标移到特定的盒子或者图片中对盒子或图片进行旋转、隐藏或显示等效果。

transition 的意思是过度效果，2s是过度效果两秒，0s是过渡效果前停顿0秒。

ease的意思是慢速开始，然后变快，然后慢速结束的过渡效果。

最后效果就是鼠标移入时图片以中心旋转180deg。