rotateX()

åºçº¿ å¹¿æ³å¯ç¨

å°è¯ä¸ä¸

transform: rotateX(0);

transform: rotateX(45deg);

transform: rotateX(-0.2turn);

transform: rotateX(3.142rad);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/proxy/developer.mozilla.org/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

å¤æ³¨ï¼rotateX(a) ç¸å½äº rotate3d(1, 0, 0, a).

è¯æ³

rotateX() å¼èµ·çæè½¬éç±<angle>æå®ãå¦æä¸ºæ£ï¼åé¡ºæ¶éæ¹åç§»å¨ï¼å¦æä¸ºè´ï¼åéæ¶éæ¹åç§»å¨ã

css

rotateX(a)

åæ°å¼

a: a æ¯ä¸ä¸ª<angle> ï¼è¡¨ç¤ºæè½¬çè§åº¦ãæ£æ°è§åº¦è¡¨ç¤ºé¡ºæ¶éæè½¬ï¼è´æ°åè¡¨ç¤ºéæ¶éæè½¬ã

ç¬å¡å¿åæ â²	é½æ¬¡åæ ââ²	ç¬å¡å¿åæ â³	é½æ¬¡åæ ââ³
This transformation applies to the 3D space and can't be represented on the plane.		$(\begin{matrix} 1 & 0 & 0 \\ 0 & cos(a) & -sin(a) \\ 0 & sin(a) & cos(a) \end{matrix})$	$(\begin{matrix} 1 & 0 & 0 & 0 \\ 0 & cos(a) & -sin(a) & 0 \\ 0 & sin(a) & cos(a) & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$

ç¤ºä¾

HTML

html

<div>Normal</div>
<div class="rotated">Rotated</div>

CSS

css

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotateX(45deg);
  background-color: pink;
}

ç»æ

è§è

è§è
CSS Transforms Module Level 2 # funcdef-rotatex

æµè§å¨å¼å®¹æ§

åè§

å¸®å©æ¹è¿ MDN

äºè§£å¦ä½åä¸è´¡ç®

å¨ GitHub ä¸æ¥çæ¤é¡µé¢ â¢ æ¥åæ¤åå®¹çé®é¢

rotateX()

å¸®å©æ¹è¿ MDN

å¸®å©æ¹è¿ MDN