【无标题】11.8 旋转轴心

1. 创建一个新的html文档保存，在body区域进行代码的编写，首先，我们创建一个新的div“class”类名为pkbox外部的盒子，类名的名字可以按照自己的兴趣进行命名
   

2. 然后我们再这个div内放置我们的图片，记住，这里放的标签是img标签，图片为六张
   

3. 这样子我们的源代码已经完成了，这时候我们可以编写css代码了，这里的话我个人推荐使用内联样式进行编写代码，因为这样子比较方便、修改代码，如果你有要求，你也可以用外联样式来编写css代码

4. 首先我们给每个标签设置外边距和内边距为0，现在市面上的网页基本上都会将这外边距和内边距设置为0，如果有需要的话可以在选择需要编写的代码中去修改，这样子还是挺方便的。
   

5. 之后我们这是源代码中的最外面的那个盒子”pkbox”，我们可以给这个盒子设置宽高，宽和高的话需要自己去浏览器中预览设置自己合适的宽高进行设置，记得要相对定位，因为排版真的真的很重要，外边距的话看个人喜欢，不过千万千万千万要记得设置左右外边距为自动，否则的话效果出来会偏移自己预想的效果
   

6. 现在我们设置到这里的css样式已经完成了一大半了，接下来的话是设置盒子中的图片的样式，在这个图片中我们要设置百分百的宽高，如果你设置像素的话会非常的不理想，设置百分百的话就是说你图片的宽高有多少，你这图片就自动给你设置为多少，之后一定要设置定位为绝对定位，因为上面已经设置了相对定位了，一定要相对和绝对换着来设置，不然的话设置相对定位会影响布局，搞得排版很乱，之后设置左上为0个像素（px），之后之后重头戏来了，在这张图片我们要设置过渡效果（transition），然后设置移动（transform），在设置2s，这里的2s的意思是表示这个动画的整个过程的消耗时间，在设置个linear（匀速），然后再设置最后一个标签transform-origin，这个标签是这是过度的方向。
   

7. 最后我们设置图片的移入移出（hover）悬停效果就可以了，因为效果图的话是旋转60°顺时针方向，所以我们设置rotate（旋转）和60度（deg）就行了，记得后面的话要60度60度的加上去不然的话会重叠在一起，到后面会少了个空，顺序的话也会打乱。
   

8. 最后我们来看看效果图：
   
   这是我所学到的旋转轴心，所以我要分享给你们，希望可以帮助到你们。
   以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！