css3 自动旋转-纯CSS3图标旋转效果

bendan520 css3

2023-08-26 0 1,037 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

查看演示

本文结合一个例子来讲解一个常见的变换应用，即当我们将鼠标滑动到图标按钮时css3 自动旋转，图标会手动旋转一圈。这个效果完全不依赖JS，通过CSS3变换即可完成。

变换简介

CSS3中，变换主要包括以下几种：旋转rotate、扭曲skew、缩放scale和联通translate、以及矩阵变体matrix。

1、旋转rotate()：通过指定的角度参数为原始元素指定一个2Drotation（2D旋转）。 angle是指旋转角度。如果设定值为负，则表示顺时针旋转，如果设定值为正，则表示逆时针旋转。如：变换：旋转(30deg)。

2、畸变skew([,])：X轴和Y轴上的倾斜变换（倾斜变换）。第一个参数对应于X轴，第二个参数对应于Y轴。如果不提供第二个参数，则值为0，即Y轴方向没有倒角。倾斜用于扭曲和改变元素的线条。第一个参数是水平方向扭曲的角度，第二个参数是垂直方向扭曲的角度。第二个参数是可选的，默认为 0deg。

3、缩放scale([,])：提供两个参数进行[sx,sy]缩放向量来指定一个2Dscale（2D缩放）。如果未提供第二个参数，则它采用与第一个参数相同的值。 scale(X,Y)用于对元素进行缩放，可以通过transform-origin设置元素的基点，基点也在元素的中心；底座中的X表示水平缩放倍数css3 自动旋转，Y表示垂直缩放倍数，Y为可选参数。如果不设置Y值，则表示X和Y方向的缩放因子相同。并服从X。如：transform:scale(2,1.5)。

4. Move translate([,])：通过向量[tx,ty]指定2D平移，tx为第一个过渡值参数，ty为第二个过渡值参数选项。如果未提供，ty 将取 0 作为其值。也就是translate(x, y)，表示对象被平移了。根据设置的x、y参数值，当值为正时，对象以相反方向连接，其基点默认为元素的中心点。也可以通过transformation-origin来改变基点。如变换：翻译(100px,20px)。

5. 矩阵变体matrix(,,,,,)：以六值(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[abcdef ] 变换矩阵。就是根据水平方向（X轴）和垂直方向（Y轴）重新定位元素。该属性值使用与物理相关的矩阵。

示例：图标旋转

要旋转图标，只需使用transform的rotate和transition即可完成旋转的动画效果。在此示例中，我们打算使用两个图像作为背景图像。当鼠标滑过图标时，图标会旋转360度。 html结构如下：

 
    女生 
    箭头

结合下面的CSS3，可以完成图标旋转的效果。

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; }

原文链接：点击打开链接

收藏 (0) 打赏

感谢您的支持，我会继续努力的!