transform为什么对span标签是没有效果的呢?

来源:2-18 编程练习

能量咕噜略略

2020-12-08 16:45:50

# 具体遇到的问题
transform具体是对哪些元素有效果呢,我div元素已经设置了旋转,为什么到了动画里,旋转的属性失效,又要重新设置一个默认旋转角度呢?

一共两个问题,transform是不是对行内元素无法生效(还是针对某些行内元素,包括哪些),然后就是div元素设置了旋转,到了动画里旋转效果就失效了
# 报错信息的截图

# 相关课程内容截图

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

# 粘贴全部相关代码,切记添加代码注释(请勿截图)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>arrow跳跃</title>

    <style>

        div{

            width:50px;

            height:50px;

            font:bold 45px "微软雅黑";

            position:absolute;

            bottom:0;

            right:0;

            left:0;

            margin:0 auto 100px;

    ​    ​    ​transform:rotate(90deg);

            animation: arrow 0.5s linear 0s infinite alternate;

        }

        @keyframes arrow{

            from{

                transform:translateY(0px) rotate(90deg);

            }

            to{

                transform:translateY(50px) rotate(90deg);

            }

        }

    </style>

</head>

<body>

     <div>&gt;</div>

</body>

</html>

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

写回答

1回答

好帮手慕张

2020-12-08

同学你好,问题回答如下:

1、同学说的transform属性设置不生效的问题,其实不是代码不生效,只是动画里设置同样的属性,会覆盖上边的代码,导致不生效。

2、同学可以尝试注释掉下边的动画,会发现是有效果的,如下图:

http://img.mukewang.com/climg/5fcf6168092223ae10000456.jpg

2、transform对行内元素是无效的。

祝学习愉快!

0

0 学习 · 15276 问题

查看课程