css3 图标效果,css3图标_纯CSS3图标旋转效果代码

最新推荐文章于 2023-08-01 15:26:48 发布

weixin_39819576

最新推荐文章于 2023-08-01 15:26:48 发布

阅读量333

点赞数

文章标签： css3 图标效果

摘要腾兴网为您分享:纯CSS3图标旋转效果代码，中英翻译，中意在线，中国知网，余额宝等软件知识，以及真三国无双7日语补丁，手机房源采集，plustoken钱包，dj火电影，指南针炒股软件，美团商家登录，sola病毒专杀,快速启动软件，传播易，迷你表情包，宝贝计划2，掌上理财，库，狐小狸，学趣国际英语等软件it资讯，欢迎关注腾兴网。CSS3的功能比起现在我们用的css是强大了许多了，我们现在可以使用css3做一起以前只有用图片才能达到的效果了，下面来看一个纯CSS3图标旋转效果代码 CSS3有个transform，它可以使将目标...

CSS3的功能比起现在我们用的css是强大了许多了，我们现在可以使用css3做一起以前只有用图片才能达到的效果了，下面来看一个纯CSS3图标旋转效果代码

CSS3有个transform，它可以使将目标对象变形、转换、改变。应用于需要转换角度、变换大小等场景，如图标旋转、背景放大与缩小等，简而言之，transform就是变形、改变之意，它属于CSS3的高级技术。

本文结合实例，给大家简述一个常见的transform应用，就是当我们用鼠标滑向图标按钮时，图标会自动旋转一周，这个效果完全不依赖JS，由css3的transform就可以完成。

Transform简介

在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。

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

2、扭曲skew( [, ]) ：X轴Y轴上的skew transformation(斜切变换)。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。skew是用来对元素进行扭曲变行，第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。其中第二个参数是可选参数，默认为0deg。

3、缩放scale([, ])：提供执行[sx,sy]缩放矢量的两个参数指定一个2D scale(2D缩放)。如果第二个参数未提供，则取与第一个参数一样的值。scale(X,Y)是用于对元素进行缩放，可以通过transform-origin对元素的基点进行设置，同样基点在元素中心位置；基中X表示水平方向缩放的倍数，Y表示垂直方向的缩放倍数，而Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。如：transform:scale(2,1.5)。

4、移动translate([, ]) ：通过矢量[tx, ty]指定一个2D translation，tx 是第一个过渡值参数，ty 是第二个过渡值参数选项。如果未被提供，则ty以 0 作为其值。也就是translate(x,y),它表示对象进行平移，按照设定的x,y参数值,当值为负数时，反方向移动物体，其基点默认为元素中心点，也可以根据transform-origin进行改变基点。如transform:translate(100px,20px)。

5、矩阵变形matrix(, , , , , ) ：以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向(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;