明天我就和大家聊聊《CSS中有哪些方法可以实现旋转和位移动画的效果》。 很多人可能不太了解。 为了让大家更好的了解和理解，小编为大家总结了以下内容。 ，希望这篇文章《CSS中有哪些方法可以实现旋转和位移动画的效果》能够对您有所帮助。
方法：1、使用animation属性给元素绑定动画； 2、使用“@keyframes name{100%{transform:rotate(旋转角度)translate(位移距离);}}”语句设置元素旋转和位移的动作关键帧，实现旋转加位移的效果动画片。
本教程的运行环境：windows10系统css3位移，CSS3&&HTML5版本，DellG3笔记本。
如何在css3中实现旋转加位移动画
在CSS中css3位移，您可以使用animation属性将旋转和位移动画绑定到元素。
使用@keyframes规则设置元素动画动作的关键帧，使用transform属性配合rotate()函数设置元素旋转动作，使用transform属性配合translate()函数设置元素位移动作。
示例如下：
Document
.div1{
width:100px;
height:100px;
background:pink;
border-radius:50%;
margin:0 auto;
animation:fadenum 5s;
}
@keyframes fadenum{
0%{transform:rotate(360deg) translateX(-200px);}
}
这是一个旋转加位移的效果
输出结果：
以上就是《CSS中有哪些方法可以实现旋转位移动画效果》的相关知识，感谢您的阅读，如果您想掌握本文的知识点，需要您自己去实践一下才能理解，如果您想了解更多相关文章，欢迎关注群英网，小编每天都会为您更新不同的知识。
CSS3有一个transform属性，可以对目标对象进行变换、转换、改变，应用到需要改变角度和大小的场景，比如图标旋转、背景放大缩小等。简单来说，transform就是变体的意思和变化，属于CSS3的中间技术。
本文结合一个例子来讲解一个常见的变换应用，即当我们将鼠标滑动到图标按钮时，图标会手动旋转一圈。 这个效果完全不依赖JS，可以通过CSS3的transform属性来完成。
先看疗效示例：米普科技（联系我们——》关注）
变换简介
CSS3中的变换主要包括以下几种类型：旋转rotate、扭曲倾斜、缩放比例、移动平移和矩阵变体矩阵。
1. 旋转 旋转（角度）
通过指定的角度参数为原始元素指定一个2Drotation（2D旋转）。 angle是指旋转角度。 如果设定值为负，则表示顺时针旋转，如果设定值为正，则表示逆秒旋转。 如：transform:rotate(30deg)，表示顺时针旋转30度。
2. 失真度([,])
X 轴和 Y 轴上的倾斜变换。 第一个参数对应于X轴，第二个参数对应于Y轴。 如果不提供第二个参数，则值为0，即Y轴方向没有倒角。 倾斜用于扭曲和改变元素的线条。 第一个参数是水平方向扭曲的角度，第二个参数是垂直方向扭曲的角度。 第二个参数是可选的，默认为 0deg，例如：transform:skew(30deg,30deg)。
3. 变焦倍数([,])
提供两个参数来执行指定 2Dscale（2D 缩放）的 [sx,sy] 缩放向量。 如果未提供第二个参数，则它采用与第一个参数相同的值。 scale(X,Y)用于对元素进行缩放，可以通过transform-origin设置元素的基点，基点也在元素的中心； 底座中的X表示水平缩放倍数，Y表示垂直缩放倍数，Y为可选参数。 如果不设置Y值css3图片翻转，则表示X和Y方向的缩放因子相同。 并服从X。如：transform:scale(2,1.5)。
4. 移动翻译([,])
通过向量[tx,ty]指定2D平移，tx是第一个过渡值参数css3图片翻转，ty是第二个过渡值参数选项。 如果未提供，ty 将取 0 作为其值。 也就是translate(x, y)，表示对象被平移了。 根据设置的x、y参数值，当值为正时，对象以相反方向连接，其基点默认为元素的中心点。 也可以通过transformation-origin来改变基点。 如变换：翻译(100px,20px)。
5. 矩阵变体matrix(,,,,,)
将 2D 变换指定为六值 (a,b,c,d,e,f) 变换矩阵，相当于直接应用 [abcdef] 变换矩阵。 就是根据水平方向（X轴）和垂直方向（Y轴）重新定位元素。 该属性值使用与物理相关的矩阵。
示例：图标旋转
要旋转图标，只需使用transform的rotate和transition即可完成旋转的动画效果。 在此示例中，我们打算使用两个图像作为背景图像。 当鼠标滑过图标时，图标会旋转360度。 html结构如下：
结合下面的CSS3，可以完成图标旋转的效果。
li a i {
background: url(icon.png) no-repeat;
display: block;
width: 42px;
height: 32px;
position: relative;
z-index: 10;
float: left;
-webkit-transition: -webkit-transform 0.4s ease-out;
-moz-transition: -moz-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
}
li a:hover i {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
HTML 完整代码
ul {
width: 145px;
margin: 0 auto;
list-style: none;
font-size: 30px;
}
li {
padding: 10px
}
li a {
width: 145px;
height: 42px;
line-height: 36px;
display: block;
color: #333
}
li a:hover {
text-decoration: none
}
li a i {
background: url(icon.png) no-repeat;
display: block;
width: 42px;
height: 32px;
position: relative;
z-index: 10;
float: left;
-webkit-transition: -webkit-transform 0.4s ease-out;
-moz-transition: -moz-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
}
li a:hover i {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
li.female a i {
background-position: 0 0;
}
li.arrow a i {
background-position: 0 -50px;
}
疗效举例：
应用示例：（米普科技）
原文：helloweba.com
参考推荐：
CSS图像翻转动画技术解读
CSS3 旋转图标标签
网站首页设计模板（版式设计）
网站首页设计模板（社交图标）
