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

# 具体遇到的问题
0:56为什么说：：before和：：after不好进行整体的旋转？不靠谱？

# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

在这里输入代码，可通过选择【代码语言】突出显示

慕仙2169824 2020-12-10

源自：“仿穷游”首页静态项目 2-3 页面顶部的开发（2）

33

收起

1回答

好帮手慕张回答被采纳获得+3积分 2020-12-11 12:10:34

同学你好，问题回答如下：

1、老师这里用的是两个小盒子放在一个大盒子里实现小三角，旋转的时候直接旋转大盒子就能整体旋转。

2、而利用::before,::after伪元素也可以实现，老师说的不靠谱并不是就不能用，只是实现的思路不一样，如果用两个伪元素实现的三角形，外面没有包裹的盒子，所以没办法做到两个三角形一起旋转，因此这里不推荐使用伪元素来实现三角形的效果。

3、其实由于代码的灵活性，还有很多其他的实现方式，比如：我们可以直接使用一个伪元素实现，可以参考如下：

祝学习愉快！

慕仙2169824 提问者 #1

案例里面老师旋转的是代码里面的b标签和i标签,不是外层em标签
<em>
<b></b>
<i></i>
</em>

2020-12-11 13:22:18
好帮手慕张回复提问者慕仙2169824 #2

同学你好，案例中老师是先旋转b标签和i标签使三角形朝下的方向，然后在hover的时候是旋转的最外面的em标签的，因为三角形是两个盒子拼接成的，只有旋转最外面的em标签才能实现三角形整体旋转。如下图：

如果同学还有哪里不理解的话，可以再具体的描述下，再次进行提问，老师会帮助你解决。
祝学习愉快！

2020-12-11 14:39:56

相似问题

关于before/after.

鼠标经过，不会旋转

可以给一下完整的代码吗？

两个问题，三角形选择后为什么会错位，为什么旋转后缩放就失效了

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

登录后可查看更多问答，登录/注册

前端工程师2020

参与学习人
提交作业 7880 份
解答问题 15282 个

前端技术快速更迭，人才紧缺。带你从0基础开始，成为Web全栈工程师，转行就业更顺畅。

本课精华内容

问答作业

老师，我在xhr.send()出错了

93 2

老师好，这里虽然老师给了方法，但我想问问关于定位后的宽高

44 2

函数里面的参数是函数,那么里面作为参数的函数是如何调用的?

74 4

老师请检查

30 1

老师，关于ctx.set()我存在困惑

32 1

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载