关于矢量图标怎么实现旋转

首页课程实战体系课手记专栏慕课教程

关于矢量图标怎么实现旋转

来源：2-7 使用CSS制作菜单

慕圣2339050

2021-04-10 19:12:08

我在阿里巴巴矢量图标库下载的图标怎么实现当鼠标触碰到的时候就180℃旋转，普通的方法用transform:rotate(180deg)试过了，实现不了

写回答

1回答

好帮手慕言

2021-04-11

同学你好，可以调整为块元素之后再旋转，如下（例子中的图标，是源码中的，同学测试时，可以把如下代码放在源码中测试）：

例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/base.css">
    <style>
        a:hover {
            transform: rotate(50deg);
        }

        a {
            display: block;
            width: 20px;
            height: 20px;
        }

        body {
            padding: 50px;
        }
    </style>
</head>

<body>
    <a href="" class="iconfont">&#xe62d;</a>
</body>

</html>

祝学习愉快~

0 学习 · 15276 问题

查看课程

相似问题

0:56为什么说：：before和：：after不好进行整体的旋转？

回答 1

::before和after怎么实现的旋转

回答 1

为什么我ps的图标那么大

回答 2

导航鼠标放在图标上背景有动画效果但是图标也跟着放大了

回答 2

这个下拉小箭头如果用PNG形式的图怎么做啊？

回答 2

打开慕课网App查看更多内容