详解54 transform: rotate()；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div
/*核心:这些都是以div正中心开始旋转的.仔细看看文字,记住每一个文字开始都是在左上角为0deg。
你可以理解四个角是0deg 90deg 180deg 270deg,注意一下原点旋转一周30deg，也是开始的原点.
*/
{
width: 200px;
height: 200px;
border: 3px solid red;
background: yellow;
margin: 100px auto;
}
.box1
{
transform: rotate(30deg);
}
.box2
{
transform: rotate(90deg);
}
.box3
{
transform: rotate(120deg);
}
.box4{
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
.box5{
-webkit-transform:rotate(270deg);
transform:rotate(270deg);
}
.box6{
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
.box7
{
transform: rotate(-45deg);/*逆时针旋转45deg*/
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
<div class="box5">box5</div>
<div class="box6">box6</div>
<div class="box7">box7</div>
<div class="box8">box8</div>
<div class="box9">box9</div>
<div class="box10">box10</div>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/08/19 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
