CSS rotate ਪ੍ਰਤੀਯੋਗਿਤਾ

  • ਪਿਛਲਾ ਪੰਨਾ right
  • ਅਗਲਾ ਪੰਨਾ row-gap

定义和用法

rotate 属性允许你旋转元素。

rotate 属性定义了一个值，表示元素绕 z 轴顺时针旋转的程度。要绕 x 轴或 y 轴或其他方式旋转元素，必须进行相应的定义。

rotate ਗੁਣ ਦੇ ਮੁੱਲ ਇੱਕ ਕੋਣ, ਅਕਸ ਨਾਮ + ਕੋਣ ਜਾਂ ਤਿੰਨ ਮੁੱਲ + ਕੋਣ ਹੋ ਸਕਦੇ ਹਨ。

  • ਜੇਕਰ ਕੋਣ ਹੀ ਨਹੀਂ ਦਿੱਤਾ ਗਿਆ ਤਾਂ ਐਲੀਮੈਂਟ ਜ਼ੀ-ਅਕਸ ਤੇ ਸਾਈਕਲਿਕ ਰੋਟੇਸ਼ਨ ਕਰੇਗਾ。
  • ਜੇਕਰ ਅਕਸ ਨਾਮ + ਕੋਣ ਦਿੱਤੇ ਗਏ ਹਨ ਤਾਂ ਐਲੀਮੈਂਟ ਸ਼ਾਮਲ ਅਕਸ ਤੇ ਸਾਈਕਲਿਕ ਰੋਟੇਸ਼ਨ ਕਰੇਗਾ。
  • ਜੇਕਰ ਤਿੰਨ ਮੁੱਲ + ਕੋਣ ਦਿੱਤੇ ਗਏ ਹਨ ਤਾਂ ਇਹ ਤਿੰਨ ਮੁੱਲ ਇੱਕ ਪਾਰਸ਼ੀ ਨਿਰਧਾਰਿਤ ਕਰਦੇ ਹਨ ਜਿਸ ਤੇ ਐਲੀਮੈਂਟ ਰੋਟੇਸ਼ਨ ਕਰੇਗਾ。

ਬਿਹਤਰ ਸਮਝ ਲਈ rotate ਗੁਣ ਦੇ ਸਬੰਧ ਵਿੱਚਪ੍ਰਦਰਸ਼ਨ。

ਨੋਟ:ਐਲੀਮੈਂਟ ਨੂੰ ਰੋਟੇਸ਼ਨ ਕਰਨ ਦਾ ਇੱਕ ਹੋਰ ਤਕਨੀਕ ਹੈ ਜੋ ਕਿ CSS rotate() ਫੰਕਸ਼ਨ ਦੇ CSS ਟ੍ਰਾਂਸਫਾਰਮ ਗੁਣ。

ਇਨਸਟੈਂਸ

ਉਦਾਹਰਣ 1

ਐਲੀਮੈਂਟ ਦੇ ਰੋਟੇਸ਼ਨ ਨੂੰ ਬਦਲੋ:

div {
  rotate: 30deg;
}

ਖੁਦ ਸਿਖਣ ਲਈ

ਉਦਾਹਰਣ 2

ਜਦੋਂ rotate ਜਦੋਂ ਪਾਰਸ਼ੀ ਅਤੇ ਕੋਣ ਸੈਟ ਕੀਤੇ ਗਏ ਹਨ ਤਾਂ ਐਲੀਮੈਂਟ ਉਸ ਪਾਰਸ਼ੀ ਤੇ ਰੋਟੇਸ਼ਨ ਕਰੇਗਾ。

ਇੱਥੇ ਪਾਰਸ਼ੀ ਦੋ ਪਲੇਨ ਵਿੱਚ [1 1 0] ਹੈ ਜੋ ਕਿ x ਅਤੇ y ਨਿਰਦੇਸ਼ਾਂ ਵਾਲਾ ਹੈ ਅਤੇ 60 ਦਿਗਰੀ ਰੋਟੇਸ਼ਨ ਕਰੇਗਾ:

div {
  rotate: 1 1 0 60deg;
}

ਖੁਦ ਸਿਖਣ ਲਈ

CSS ਸਿਧਾਂਤ

rotate: axis angle|initial|inherit;

ਗੁਣ ਮੁੱਲ

ਮੁੱਲ ਵਰਣਨ
axis

ਵਿਕਲਪਿਤ।ਜੇਕਰ ਸੈਟ ਨਹੀਂ ਕੀਤਾ ਗਿਆ ਤਾਂ ਮੂਲ ਮੁੱਲ ਹੈ z-ਅਕਸ。

  • x
  • y
  • z
angle

ਐਲੀਮੈਂਟ ਦੇ ਰੋਟੇਸ਼ਨ ਦਰਜੇ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ।ਸੰਭਵ ਇਕਾਈ:

  • deg（ਡਿਗਰੀ）
  • rad（ਰੇਡੀਅਨ）
  • turn（ਰਾਉਂਡ）
vector angle

ਤਿੰਨ ਨੰਬਰ ਇੱਕ ਪਾਰਸ਼ੀ ਨਿਰਧਾਰਿਤ ਕਰਦੇ ਹਨ ਜਿਸ ਤੇ ਐਲੀਮੈਂਟ ਰੋਟੇਸ਼ਨ ਕਰੇਗਾ。

ਇਹ ਤਿੰਨ ਨੰਬਰ ਹਨ ਜੋ ਕਿ ਪਾਰਸ਼ੀ ਦੇ x, y ਅਤੇ z ਨਿਰਦੇਸ਼ਾਂ ਹਨ。

ਆਖਰੀ ਮੁੱਲ ਇਹ ਰੋਟੇਸ਼ਨ ਦਾ ਕੋਣ ਹੈ。

ਸੰਭਵ ਮੁੱਲ:

number number number angle
initial ਇਸ ਗੁਣ ਨੂੰ ਉਸ ਦੇ ਮੂਲ ਮੁੱਲ ਨੂੰ ਸੈਟ ਕਰੋ।ਦੇਖੋ: initial。
inherit ਆਪਣੇ ਮਾਤਾ ਐਲੀਮੈਂਟ ਤੋਂ ਇਸ ਗੁਣ ਨੂੰ ਵਿਰਾਸਤੀਕਰਣ ਕਰੋ।ਦੇਖੋ: inherit。

ਤਕਨੀਕੀ ਵੇਰਵੇ

ਮੂਲ ਮੁੱਲ: none
ਵਿਰਾਸਤੀਕਰਣ: ਨਹੀਂ
ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣ: ਸਮਰਥਨ ਕਰਦਾ ਹੈ।ਦੇਖੋ:ਐਨੀਮੇਸ਼ਨ ਸਬੰਧਤ ਗੁਣ。
ਵਰਜਨ: CSS3
JavaScript ਸਿਧਾਂਤ: object.style.rotate="-120deg"

ਬਰਾਉਜ਼ਰ ਸਮਰਥਨ

ਸਟੇਬਲ ਵਿੱਚ ਨੰਬਰ ਇਹ ਪਹਿਲਾ ਪੂਰੀ ਤਰ੍ਹਾਂ ਇਸ ਗੁਣ ਨੂੰ ਸਮਰਥਨ ਕਰਨ ਵਾਲਾ ਬਰਾਉਜ਼ਰ ਵਰਜਨ ਹੈ。

ਚਰਮ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪਰਾ
104 104 72 14.1 90

ਸਬੰਧਤ ਪੇਜ਼

ਟੂਟੀਕਲ:CSS 2D ਟ੍ਰਾਂਸਫਾਰਮ

ਟੂਟੀਕਲ:CSS 3D ਟਰਾਂਸਫਾਰਮ

ਸਲਾਹਦਾਰੀਆਂ:CSS scale ਪ੍ਰਤੀਯੋਗਿਤਾ

ਸਲਾਹਦਾਰੀਆਂ:CSS translate ਪ੍ਰਾਪਰਟੀ

  • ਪਿਛਲਾ ਪੰਨਾ right
  • ਅਗਲਾ ਪੰਨਾ row-gap