<!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>
详解54 transform: rotate();
原创
©著作权归作者所有:来自51CTO博客作者陈业贵的博客的原创作品,请联系作者获取转载授权,否则将追究法律责任
下一篇:sass中循环结构
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
从0实现llama3
基于llama3的开源参数,详细介绍从0构造Transformer文本生成模型的过程。
llama3 AIGC的底层技术 Transfomer -
原生js获取元素transform的scale和rotate
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>D
html5 javascript Math html Internet -
CSS动画:Transform中使用频繁的scale,rotate,translate动画
动画中,skew只是transform中的一种形式的动画,我们还可以学习scale,rotate,translate.这是目前使用比较频繁的属性动作.
动画 html5 css3 rotate 前端编程 scale