蓝桥杯Web组省赛

最新推荐文章于 2024-09-03 11:17:41 发布

web_beginner1

最新推荐文章于 2024-09-03 11:17:41 发布

阅读量441

点赞数 2

分类专栏：蓝桥杯文章标签： css3

本文链接：https://blog.csdn.net/web_beginner1/article/details/124109997

版权

蓝桥杯专栏收录该内容

3 篇文章 0 订阅

订阅专栏

2.展开你的扇子（5分）

使用css3实现元素呈扇形展开的效果

修改对应的css

#item1{
  transform:rotate(-60deg);
  /*transform: rotate(10deg);*/
}#item2{
  transform:rotate(-50deg);
  /*transform: rotate(10deg);*/
}#item3{
  transform:rotate(-40deg);
  /*transform: rotate(10deg);*/
}#item4{
  transform:rotate(-30deg);
  /*transform: rotate(10deg);*/
}#item5{
  transform:rotate(-20deg);
  /*transform: rotate(10deg);*/
}#item6{
  transform:rotate(-10deg);
  /*transform: rotate(10deg);*/
}#item7{
  transform:rotate(10deg);
  /*transform: rotate(10deg);*/
}#item8{
  transform:rotate(20deg);
  /*transform: rotate(10deg);*/
}
#item9{
  transform:rotate(30deg);
  /*transform: rotate(10deg);*/
}

#item10{
  transform: rotate(40deg);
}
#item11{
  transform: rotate(50deg);
}
#item12{
  transform: rotate(60deg);
}

使用transform:rotate来使元素转动一定的角度，顺时针和逆时针通过数值的+,-来改变。

transform属性

transform：translateX(apx) / translateY(bpx) / translateZ(cpx) 平移，对应x轴，y轴，z轴

transform：scale（1.5）缩放，负值就是缩小。

transform:rotate 旋转

最终效果