如何使用CSS Transform和Transition将3个&#9866符号转换为「-X」样式

代码问题排查 #

你的代码存在4个核心问题导致无法实现预期效果：

• 过渡属性写在了:hover伪类中，仅悬浮触发时有过渡，鼠标移开时无过渡回弹效果，过渡属性应该定义在元素的默认样式规则里
• 缺少内部.bar元素的基础样式，3个div默认上下堆叠的间距、尺寸不受控，旋转后无法对齐形成X形
• transform-origin设置没有匹配字符实际位置，旋转后会出现偏移
• 没有给.bar设置初始transform值，部分浏览器无法触发过渡动画

修复后的可运行代码 #

CSS代码

/* 控制菜单整体尺寸和悬浮指针样式 */
#menu{
    width: 30px;
    cursor: pointer;
}
/* 给每个横杠设置基础样式，过渡属性统一写在默认状态 */
.bar {
    height: 20px;
    line-height: 20px;
    margin: 2px 0;
    transition: all 1s ease-out;
    text-align: center;
}
#menu:hover .bar:nth-of-type(1){
    transform-origin: center;
    /* 增加Y轴偏移让上下旋转的横杠交叉对齐成X */
    transform: translateY(6px) rotate(45deg);
}
#menu:hover .bar:nth-of-type(3){
    transform-origin: center;
    transform: translateY(-6px) rotate(-45deg);
}
#menu:hover .bar:nth-of-type(2){
    transform: translateX(-15px);
}

HTML代码（和原代码一致即可）

<html>
<head></head>
<body>
    <div id="menu" >
        <div class="bar" id="br1">&#9866</div>
        <div class="bar" id="br2">&#9866</div>
        <div class="bar" id="br3">&#9866</div>
    </div>
</body>
</html>

内容的提问来源于stack exchange，提问作者Sahil Shrivastava