CSS中的rotate()函数使元素围绕二维表面上的固定点旋转,而不会造成任何变形。结果是 <transform-function> 数据类型。
元素围绕其旋转的固定点也称为变换原点,默认为元素的中心。使用 CSS 属性 transform-origin,可以更改和自定义变换原点。
元素的旋转由rotate() 函数创建的内容由<angle> 指定。如果角度值为正,则旋转运动为顺时针;如果值为负,则旋转运动为逆时针。当旋转180度时,称为点反射。
可能的值
函数rotate()只能采用一个参数。它指定旋转角度。
<angle>:以度数表示。旋转方向基于书写方向。
当方向为从左到右上下文时,正角度沿顺时针方向旋转元素;
当方向是从右到左上下文时,正角度将逆时针方向旋转元素;反之,负角度将逆时针方向旋转元素。而负角度则按顺时针方向旋转。
语法
transform: rotate(35deg) | rotate(-35deg);
CSSrotate(): 从左到右方向旋转
以下是从左到右方向以各种值作为参数的rotate()函数的示例,例如deg、turn、grads:
<html>
<head>
<style>
#container {
display: flex;
}
#sample-div {
height: 100px;
width: 100pX;
border: 2py solid black;
background-image: url(/css/images/logo.png);
margin-bottom: 2em;
}
section {
padding: 25px;
border: 2px solid red;
}
.rotate-positive {
transform: rotate(45deg);
background-image: url(/css/images/logo.png);
}
.rotate-negative {
transform: rotate(-75deg);
background-image: url(/css/images/logo.png);
}
.rotate-turn {
transform: rotate(2.5turn);
background-image: url(/css/images/logo.png);
}
.rotate-grads {
transform: rotate(2grads);
background-image: url(/css/images/logo.png);
}
</style>
</head>
<body>
<h1>rotate() left-to-right direction</h1>
<div id="container">
<section>
<p>no rotation</p>
<div id="sample-div"></div>
</section>
<section>
<p>rotate(45deg)</p>
<div class="rotate-positive" id="sample-div"></div>
</section>
<section>
<p>rotate(-75deg)</p>
<div class="rotate-negative" id="sample-div"></div>
</section>
<section>
<p>rotate(2.5turn)</p>
<div class="rotate-turn" id="sample-div"></div>
</section>
<section>
<p>rotate(2grads)</p>
<div class="rotate-grads" id="sample-div"></div>
</section>
</div>
</body>
</html>
CSSrotate(): 从右到左方向旋转
以下是一个以各种值作为参数的rotate()函数的示例,例如deg、turn、grads,在右侧-向左方向:
<html dir="rtl">
<head>
<style>
#container {
display: flex;
}
#sample-div {
height: 100px;
width: 100pX;
border: 2py solid black;
background-image: url(/css/images/logo.png);
margin-bottom: 2em;
}
section {
padding: 25px;
border: 2px solid red;
}
.rotate-positive {
transform: rotate(45deg);
background-image: url(/css/images/logo.png);
}
.rotate-negative {
transform: rotate(-75deg);
background-image: url(/css/images/logo.png);
}
.rotate-turn {
transform: rotate(2.5turn);
background-image: url(/css/images/logo.png);
}
.rotate-grads {
transform: rotate(2grads);
background-image: url(/css/images/logo.png);
}
</style>
</head>
<body>
<h1>rotate() right-to-left direction</h1>
<div id="container">
<section>
<p>no rotation</p>
<div id="sample-div"></div>
</section>
<section>
<p>rotate(45deg)</p>
<div class="rotate-positive" id="sample-div"></div>
</section>
<section>
<p>rotate(-75deg)</p>
<div class="rotate-negative" id="sample-div"></div>
</section>
<section>
<p>rotate(2.5turn)</p>
<div class="rotate-turn" id="sample-div"></div>
</section>
<section>
<p>rotate(2grads)</p>
<div class="rotate-grads" id="sample-div"></div>
</section>
</div>
</body>
</html>
CSSrotate(): 将旋转与其他转换函数结合
以下是与translate()函数一起使用的rotate()函数的示例,其中正和负值:
<html>
<head>
<style>
div {
position: absolute;
left: 40px;
top: 40px;
width: 110px;
height: 110px;
background-color: lightblue;
}
.negative-rotate-translate {
background-color: transparent;
outline: 5px dotted red;
transform: rotate(-55deg) translate(-10px);
}
.positive-rotate-translate {
background-color: yellow;
transform: rotate(35deg) translate(190px);
}
.positive-translate-rotate {
background-color: green;
transform: translate(190px) rotate(35deg);
}
</style>
</head>
<body>
<div>No function</div>
<div class="negative-rotate-translate">
-ve rotated
</div>
<div class="positive-rotate-translate">
rotate()+
translate()
</div>
<div class="positive-translate-rotate">
translate()+
rotate()
</div>
</body>
</html>