旋转rotate()实现CSS3变形之旋转

cesc

旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度。如果这个值为正值,元素相对原点中心顺时针旋转;如果这个值为负值,元素相对原点中心逆时针旋转。如下图所示:

CSS3变形 旋转 rotate()

HTML代码:

<div class="wrapper">
  <div></div>
</div>

CSS代码:

.wrapper {
  width: 200px;
  height: 200px;
  border: 1px dotted red;
  margin: 100px auto;
}
.wrapper div {
  width: 200px;
  height: 200px;
  background: orange;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

效果如下:

CSS3变形 旋转 rotate()

随机文章

小小课堂:个人网站推广实战经验分享
世界因互联网+改变
活着就是折腾→生活就是折腾→人生就是折腾
DNF魔枪士普雷武器动态外观展示,A丨B双色
LOL测试服2月12日希维尔加强 劫技能改动上线
我的世界:mc里谁混的最惨?僵尸实至名归,老mc眉头一皱:不对!
砸了几百万却只能当个辅助?王思聪炸了,准备卖号撤出逆水寒?
魔兽世界2月21日在线修正-吉安娜终于削弱了!

百度搜索“错误博客”即可找到本站,微信搜索“cuowucom”关注错误博客公众号。错误博客( cuowu.com )欢迎用户投稿,发布者:用户投稿,文章版权归作者所有,投稿文章不代表错误博客立场,中二少年发布为错误博客原创文章,转载请注明出处:https://cuowu.com/27285.html