您的位置:首页技术文章
文章详情页

前端 - transform:rotate不能旋转的问题

【字号: 日期:2024-06-10 18:23:04浏览:28作者:猪猪
导读:问题描述这个是我要的效果,箭头代码如下.page4 .arrow-up{position: absolute;width: 80/100rem;height: auto;margi...

问题描述

前端 - transform:rotate不能旋转的问题

这个是我要的效果,箭头代码如下

.page4 .arrow-up{

position: absolute;width: 80/100rem;height: auto;margin-left: 50%;left:-40/100rem;bottom: 5%;animation: moveIconUp ease 2s both infinite;-webkit-animation: moveIconUp ease 2s both infinite;transform:rotate(180deg);-webkit-transform:rotate(180deg);

}

@-webkit-keyframes moveIconUp {

0% { -webkit-transform: translateY(120%); opacity: 0;}50% { -webkit-transform: translateY(0%); opacity: 1;}100% { -webkit-transform: translateY(-160%); opacity: 0;}

}

出来的效果是

前端 - transform:rotate不能旋转的问题

箭头ui切出来是向下的,我是想用transform:rotate(180deg)把他转过来,不知道那里错了

问题解答

回答1:

你的动画moveIconUp 里面设置了transform把它覆盖掉了。transform多个属性用空格隔开,不然后面写的会把前面的覆盖,这样写:transform:translateY(-160%) rotate(180deg)

回答2:

transform里的各个属性不能单独设置

回答3:

设置成块状元素

相关文章: