CSS3旋转位移的效果

开发工具与关键技术：DWHTML+CSS3
作者：彭水清
撰写时间：2019年1月18日

我学习了HTML与CSS3，在CSS3里我发现了很多很有趣的代码，就是如何去利用这些代码来实现自己想要的效果。接下来就是我要怎么去用CSS3来现实我自己想要的一些效果。
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：

1、规定您希望把效果添加到哪个 CSS 属性上
2、规定效果的时长
注释：如果时长未规定，则不会有过渡效果，因为默认值是 0。

首先，先写HTML的代码

接下来我们要给这些源代码一些样式

为了营造鼠标移入图片，图片就会有CSS3旋转位移的效果
注释：伪类用于向某些选择器添加特殊的效果。

然后我以center 400px为中心，就是让图片围绕这个中心旋转位移；为了清楚的看到旋转位移的效果，我使用了transition的属性

以下就是我的效果图：

效果开始于指定的 CSS 属性改变值时。CSS 属性改变的典型时间是鼠标指针位于元素上时，当鼠标指针移出元素时，它会逐渐变回原来的样式。
鼠标还没有移入元素上的时候是这样子的，动态如下：

然后当鼠标指针移入元素时，图片就会散开，显示的效果如下：

以上就是我的作品，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！