首先我们来看一下HTML大概的布局
还未加伪类时还是图片没有任何的效果,加了伪类后图片中间竖直两边旋转特定的度数,可以做到旋转的效果。
下面是css样式和伪类中特定的一些效果样式
主要讲的是上面代码中的transform属性它可以在css3中进行2D转换使元素改变形状、尺寸和位置,对元素进行位移、缩放、移动、拉长或者拉伸。
perspective元素的描述是元素距离视图的距离,以像素计。
rotateY() 方法的意思是沿着Y轴旋转。
deg是度数的意思
原本图片为旋转时旋转的度数是0deg也就是0度。
通过伪类选择器:hover设置鼠标移到特定的盒子或者图片中对盒子或图片进行旋转、隐藏或显示等效果。
transition 的意思是过度效果,2s是过度效果两秒,0s是过渡效果前停顿0秒。
ease的意思是慢速开始,然后变快,然后慢速结束的过渡效果。
最后效果就是鼠标移入时图片以中心旋转180deg。