为什么角度不生效?

为什么角度不生效?

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

div{

width: 200px;

height:200px;

border:1px solid;

border-radius: 50%;

background: radial-gradient(ellipse at top right, red,blue 60% ,transparent );

transform:rotate(0deg);

transition-property:transform;

}

div:hover{

transform:rotate(45deg);

transform: translate(100px);

transition-property:transform;

}

</style>

</head>

<body>

<div></div>

</body>

</html>


正在回答

登陆购买课程后可参与讨论,去登陆

2回答

transform:rotate(45deg);

transform: translate(100px);

你这样写,后面的属性就会覆盖前面的属性。

需要把所有的变换都写在一个 transform属性中才可以。

卡布琦诺 2017-07-17 09:43:31

你的圆角是生效的,你设置了border-radius: 50%;浏览器显示已经是一个圆了,border-radius有兼容性,建议亲使用谷歌浏览器进行预览效果,祝学习愉快!

  • 提问者 锅里的芒果 #1
    抱歉老师,我表述错误,是旋转角度没有生效。为什么不生效呢?
    2017-07-17 10:57:36
  • 卡布琦诺 回复 提问者 锅里的芒果 #2
    这个跟transform后面的 属性值的执行顺序有关,建议修改成transition-property: transform;transform:translate(100px) rotate(45deg);希望可以帮到你!
    2017-07-17 11:45:20
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
HTML5与CSS3实现动态网页 2018
  • 参与学习       1887    人
  • 提交作业       4643    份
  • 解答问题       5760    个

有HTML和CSS基础,却不知道如何进阶?本路径带你通过系统学习,完成从“会做网页”到“做出好的动态网页”的蜕变,迈出成为前端工程师的第一步。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师