CSS 函数 - rotate（）

CSS 中的 rotate（） 函数围绕二维表面上的固定点旋转元素，而不会引起任何变形。结果是 <transform-function> 数据类型。

元素围绕其旋转的固定点也称为变换原点，默认为元素的中心。使用 CSS 属性 transform-origin，可以更改和自定义转换原点。

rotate（） 函数创建的元素的旋转由 <angle> 指定。如果角度值为正，则旋转的运动将是顺时针旋转的，如果值为负，则旋转的运动将是逆时针旋转的。当旋转180度时，称为点反射。

可能的值

函数 rotate（） 只能接受一个参数。它指定了旋转角度。

<angle>：以度数表示。旋转方向基于书写方向。
- 当方向为 从左到右 的上下文时，正角度使元素顺时针方向旋转;而负角则将其逆时针方向旋转。
- 当方向为 从右到左 的上下文时，正角度使元素逆时针方向旋转;而负角则将其顺时针方向旋转。

语法


 transform: rotate(35deg) | rotate(-35deg);

CSS rotate（） - 从左到右方向旋转

以下是 rotate（） 函数的示例，其中从左到右方向具有各种值作为参数，例如 deg、turn、grads：


<html>
<head>
<style>
	 	#container {
	 	 	 display: flex;
	 	}
	 	#sample-div {
	 	 	 height: 100px;
	 	 	 width: 100pX;
	 	 	 border: 2py solid black;
	 	 	 background-image: url(images/logo.png);
	 	 	 margin-bottom: 2em;
	 	}

	 	section {
	 	 	 padding: 25px;
	 	 	 border: 2px solid red;
	 	}

	 	.rotate-positive {
	 	 	 transform: rotate(45deg);
	 	 	 background-image: url(images/logo.png);
	 	}

	 	.rotate-negative {
	 	 	 transform: rotate(-75deg);
	 	 	 background-image: url(images/logo.png);
	 	}

	 	.rotate-turn {
	 	 	 transform: rotate(2.5turn);
	 	 	 background-image: url(images/logo.png);
	 	}

	 	.rotate-grads {
	 	 	 transform: rotate(2grads);
	 	 	 background-image: url(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>

CSS rotate（） - 从右到左方向旋转

以下是 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(images/logo.png);
	 	 	 margin-bottom: 2em;
	 	}

	 	section {
	 	 	 padding: 25px;
	 	 	 border: 2px solid red;
	 	}

	 	.rotate-positive {
	 	 	 transform: rotate(45deg);
	 	 	 background-image: url(images/logo.png);
	 	}

	 	.rotate-negative {
	 	 	 transform: rotate(-75deg);
	 	 	 background-image: url(images/logo.png);
	 	}

	 	.rotate-turn {
	 	 	 transform: rotate(2.5turn);
	 	 	 background-image: url(images/logo.png);
	 	}

	 	.rotate-grads {
	 	 	 transform: rotate(2grads);
	 	 	 background-image: url(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>

CSS rotate（） - 将旋转与其他转换函数结合

以下是 rotate（） 函数与具有正值和负值的 translate（） 函数一起使用的示例：


<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>

打印本页