前端 - transform:rotate不能旋转的问题
伊谢尔伦
伊谢尔伦 2017-04-17 11:48:26
[CSS3讨论组]

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

.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;
}

}

出来的效果是

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

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

全部回复(3)
天蓬老师

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

高洛峰

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

伊谢尔伦

设置成块状元素

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号