CSS 函数 - rotateX()_CSS 菜鸟教程

CSS 中的 rotateX（） 函数用于在二维表面上围绕 x 轴（水平）旋转元素。结果是 <transform-function> 数据类型。

旋转轴穿过变换原点。使用 CSS 属性 transform-origin，可以更改和自定义转换原点。

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

可能的值

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

<angle>：以度数表示。正角使元件顺时针方向旋转;而负值则逆时针旋转。

语法


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

CSS rotateX（） - 值的组合

以下是 rotateX（） 函数的示例，其中有各种值作为参数，例如 deg、turn、grads：


<html>
<head>
<style>
	 	#container {
	 	 	 display: flex;
	 	}

	 	#sample-div {
	 	 	 height: 100px;
	 	 	 width: 100px;
	 	 	 border: 2px solid black;
	 	 	 background-image: url('images/logo.png');
	 	 	 margin-bottom: 2em;
	 	}

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

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

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

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

	 	.rotate-x-grads {
	 	 	 transform: rotateX(2grads);
	 	 	 background-image: url('images/logo.png');
	 	}
	 	</style>
	 	</head>
	 	<body>
	 	<div id="container">
	 	 	 <section>
	 	 	 	 	<p>no rotation</p>
	 	 	 	 	<div id="sample-div"></div>
	 	 	 </section>
	 	 	 <section>
	 	 	 	 	<p>rotateX(45deg)</p>
	 	 	 	 	<div class="rotate-x-positive" id="sample-div"></div>
	 	 	 </section>
	 	 	 <section>
	 	 	 	 	<p>rotateX(-75deg)</p>
	 	 	 	 	<div class="rotate-x-negative" id="sample-div"></div>
	 	 	 </section>
	 	 	 <section>
	 	 	 	 	<p>rotateX(2.5turn)</p>
	 	 	 	 	<div class="rotate-x-turn" id="sample-div"></div>
	 	 	 </section>
	 	 	 <section>
	 	 	 	 	<p>rotateX(2grads)</p>
	 	 	 	 	<div class="rotate-x-grads" id="sample-div"></div>
	 	 	 </section>
	 	</div>
</body>
</html>

<< CSS 函数 - rotateY() CSS 函数 - translate3d() >>