CSS matrix3d() ਫੰਕਸ਼ਨ

پائیدھی آگے CSS matrix() فنکشن
پائیدھی پیچھے CSS max() فنکشن
ایک سطح اوپر واپس سی ایس ایس فنکشن مراجع دستور

ਨਿਰਧਾਰਣ ਅਤੇ ਵਰਤੋਂ

CSS ਦਾ matrix3d() ਫੰਕਸ਼ਨ 16 ਮੁੱਲਾਂ ਵਾਲੇ 4x4 ਮੈਟ੍ਰਿਕਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਤਿੰਨ-ਮੋਡ ਪਰਿਵਰਤਨ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ:

matrix3d() =　　　

a1	a2	a3	a4
b1	b2	b3	b4
c1	c2	c3	c4
d1	d2	d3	d4

ਇਨਸਟੈਂਸ

ਉਦਾਹਰਣ 1

ਵਰਤੋਂ matrix3d() ਇੱਕ <div> ਐਲੀਮੈਂਟ ਲਈ ਤਿੰਨ-ਮੋਡ ਪਰਿਵਰਤਨ ਨਿਰਧਾਰਿਤ ਕਰੋ:

.div1 {
  transform: matrix3d(
    0.7, 0.1, 0.7, 0
    -0.6, 0.7, 0.2, 0
    -0.5, -0.8, 0.7, 0
    10, 10, 0, 1
  );
  font-size: 30px;
  font-weight: bold;
  width: 280px;
  padding: 10px;
  background: beige;
  font-family: verdana;
  border: 1px solid green;
}

ਖੁਦ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਉਦਾਹਰਣ 2

ਵਰਤੋਂ matrix3d() ਦੂਜੇ <div> ਐਲੀਮੈਂਟ ਲਈ ਤਿੰਨ-ਮੋਡ ਪਰਿਵਰਤਨ ਬਣਾਓ:

.div1 {
  font-size: 30px;
  font-weight: bold;
  width: 280px;
  height: 40px;
  padding: 10px;
  background: beige;
  font-family: verdana;
  border: 1px solid green;
  transform-style: preserve-3d;
  transition: transform 1.5s;
  transform: rotate3d(1, 1, 1, 30deg);
  margin: 50px auto;
}
.div1:hover {
.div1:focus {
  transform: rotate3d(1, 1, 1, 30deg);
  matrix3d(1, 0, 0, 0, 0, 1, 6, 0, 0, 0, 1, 0, 50, 100, 0, 1.1);
}

ਖੁਦ ਕੋਸ਼ਿਸ਼ ਕਰੋ

CSS ਗਰੇਫਿਕਸ

matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)

ਮੁੱਲ	ਵਰਣਨ
a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3	ਲਾਜ਼ਮੀ। ਰੇਖੀ ਪਰਿਵਰਤਨ ਦੀ ਸੰਖਿਆ ਨਿਰਧਾਰਿਤ ਕਰੋ。
a4 b4 c4 d4	ਲਾਜ਼ਮੀ। ਉਮੰਡੇ ਜਿਸ ਵਿੱਚ ਪਰਿਵਰਤਨ ਲਾਵਣਾ ਹੈ ਦੀ ਸੰਖਿਆ ਨਿਰਧਾਰਿਤ ਕਰੋ。