ಸಿಎಸ್‌ಎಸ್‌ ತ್ರಿಕೋನಮಿತೀಯ ಫಂಕ್ಷನ್‌ಗಳು: ಆಧುನಿಕ ವೆಬ್ ವಿನ್ಯಾಸಕ್ಕಾಗಿ ಗಣಿತೀಯ ಲೇಔಟ್‌ಗಳು

ವರ್ಷಗಳಿಂದ, ಸಿಎಸ್‌ಎಸ್‌ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಬಾಕ್ಸ್-ಆಧಾರಿತ ಮಾದರಿಗಳನ್ನು ಅವಲಂಬಿಸಿದೆ. ಇವುಗಳು ಹೊಂದಿಕೊಳ್ಳುವಂತಿದ್ದರೂ, ನಮಗೆ ನಿಜವಾಗಿಯೂ ಡೈನಾಮಿಕ್, ಗಣಿತೀಯವಾಗಿ ನಿಖರವಾದ ಅಥವಾ ನೈಸರ್ಗಿಕ ಆಕಾರದ ವಿನ್ಯಾಸಗಳು ಬೇಕಾದಾಗ ಈ ಮಾದರಿಗಳು ಸಾಕಾಗುವುದಿಲ್ಲ. ಇಲ್ಲಿಯೇ ಸಿಎಸ್‌ಎಸ್‌ ತ್ರಿಕೋನಮಿತೀಯ ಫಂಕ್ಷನ್‌ಗಳು ಪ್ರವೇಶಿಸುತ್ತವೆ: cos(), sin(), ಮತ್ತು tan(). ಈ ಶಕ್ತಿಯುತ ಫಂಕ್ಷನ್‌ಗಳು ಸಂಕೀರ್ಣ ಅನಿಮೇಷನ್‌ಗಳು, ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸಗಳು, ಮತ್ತು ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕವಾದ ವೆಬ್ ಅನುಭವಗಳನ್ನು ಸಿಎಸ್‌ಎಸ್‌ ಚೌಕಟ್ಟಿನಲ್ಲೇ ರಚಿಸಲು ಹೊಸ ಸಾಧ್ಯತೆಗಳ ಬಾಗಿಲು ತೆರೆಯುತ್ತವೆ.

ತ್ರಿಕೋನಮಿತೀಯ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

ಸಿಎಸ್‌ಎಸ್‌ ಅನುಷ್ಠಾನಕ್ಕೆ ಧುಮುಕುವ ಮೊದಲು, ತ್ರಿಕೋನಮಿತೀಯ ಫಂಕ್ಷನ್‌ಗಳ ಮೂಲಭೂತ ಅಂಶಗಳನ್ನು ಮತ್ತೊಮ್ಮೆ ನೋಡೋಣ. ಗಣಿತಶಾಸ್ತ್ರದಲ್ಲಿ, ಈ ಫಂಕ್ಷನ್‌ಗಳು ಲಂಬಕೋನ ತ್ರಿಕೋನದ ಕೋನಗಳು ಮತ್ತು ಬದಿಗಳನ್ನು ಸಂಬಂಧಿಸುತ್ತವೆ.

• ಕೊಸೈನ್ (cos): ಪಾರ್ಶ್ವ ಬಾಹು ಮತ್ತು ವಿಕರ್ಣದ ಅನುಪಾತ.
• ಸೈನ್ (sin): ಅಭಿಮುಖ ಬಾಹು ಮತ್ತು ವಿಕರ್ಣದ ಅನುಪಾತ.
• ಟ್ಯಾಂಜೆಂಟ್ (tan): ಅಭಿಮುಖ ಬಾಹು ಮತ್ತು ಪಾರ್ಶ್ವ ಬಾಹುವಿನ ಅನುಪಾತ.

ಸಿಎಸ್‌ಎಸ್‌ನಲ್ಲಿ, ಈ ಫಂಕ್ಷನ್‌ಗಳು ಕೋನವನ್ನು ಇನ್‌ಪುಟ್ ಆಗಿ ಸ್ವೀಕರಿಸುತ್ತವೆ (ಡಿಗ್ರಿ, ರೇಡಿಯನ್, ಟರ್ನ್, ಅಥವಾ ಗ್ರೇಡ್‌ಗಳಲ್ಲಿ ವ್ಯಕ್ತಪಡಿಸಲಾಗುತ್ತದೆ) ಮತ್ತು -1 ಮತ್ತು 1 ರ ನಡುವಿನ ಮೌಲ್ಯವನ್ನು (cos() ಮತ್ತು sin() ಗಾಗಿ) ಅಥವಾ ಯಾವುದೇ ನೈಜ ಸಂಖ್ಯೆಯನ್ನು (tan() ಗಾಗಿ) ಹಿಂದಿರುಗಿಸುತ್ತವೆ. ಈ ಮೌಲ್ಯವನ್ನು ನಂತರ ಸಿಎಸ್‌ಎಸ್‌ ಪ್ರಾಪರ್ಟಿಗಳಾದ transform, width, height, left, top, ಮತ್ತು ಇತರವುಗಳಲ್ಲಿ ಬಳಸಬಹುದು.

ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ

ತ್ರಿಕೋನಮಿತೀಯ ಫಂಕ್ಷನ್‌ಗಳು ಸಿಎಸ್‌ಎಸ್‌ನಲ್ಲಿ ತುಲನಾತ್ಮಕವಾಗಿ ಹೊಸದು, ಮತ್ತು ಬ್ರೌಸರ್ ಬೆಂಬಲವು ಇನ್ನೂ ವಿಕಸನಗೊಳ್ಳುತ್ತಿದೆ. 2023 ರ ಕೊನೆಯಲ್ಲಿ / 2024 ರ ಆರಂಭದಲ್ಲಿ, ಕ್ರೋಮ್, ಫೈರ್‌ಫಾಕ್ಸ್, ಸಫಾರಿ, ಮತ್ತು ಎಡ್ಜ್ ಸೇರಿದಂತೆ ಹೆಚ್ಚಿನ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಬೆಂಬಲ ಲಭ್ಯವಿದೆ. ಪ್ರೊಡಕ್ಷನ್‌ನಲ್ಲಿ ಈ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಬಳಸುವ ಮೊದಲು Can I use ನಂತಹ ವೆಬ್‌ಸೈಟ್‌ಗಳಲ್ಲಿ ಇತ್ತೀಚಿನ ಹೊಂದಾಣಿಕೆ ಕೋಷ್ಟಕಗಳನ್ನು ಪರಿಶೀಲಿಸುವುದು ಅತ್ಯಗತ್ಯ. ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಿಗಾಗಿ ಪಾಲಿಫಿಲ್ ಅಥವಾ ಫಾಲ್‌ಬ್ಯಾಕ್ ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.

ಮೂಲ ಸಿಂಟ್ಯಾಕ್ಸ್

ಸಿಎಸ್‌ಎಸ್‌ನಲ್ಲಿ ತ್ರಿಕೋನಮಿತೀಯ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಬಳಸುವ ಸಿಂಟ್ಯಾಕ್ಸ್ ಸರಳವಾಗಿದೆ:

property: cos(angle);
property: sin(angle);
property: tan(angle);

ಇಲ್ಲಿ angle ಅನ್ನು ವಿವಿಧ ಘಟಕಗಳಲ್ಲಿ ವ್ಯಕ್ತಪಡಿಸಬಹುದು:

• deg: ಡಿಗ್ರಿಗಳು (ಉದಾ., cos(45deg))
• rad: ರೇಡಿಯನ್‌ಗಳು (ಉದಾ., sin(0.785rad))
• turn: ತಿರುವುಗಳ ಸಂಖ್ಯೆ (ಉದಾ., cos(0.125turn) - 45deg ಗೆ ಸಮಾನ)
• grad: ಗ್ರೇಡಿಯನ್‌ಗಳು (ಉದಾ., tan(50grad) - 45deg ಗೆ ಸಮಾನ)

ಪ್ರಾಯೋಗಿಕ ಅನ್ವಯಗಳು ಮತ್ತು ಉದಾಹರಣೆಗಳು

1. ವೃತ್ತಾಕಾರದ ಸ್ಥಾನೀಕರಣ

ತ್ರಿಕೋನಮಿತೀಯ ಫಂಕ್ಷನ್‌ಗಳ ಅತ್ಯಂತ ಸಾಮಾನ್ಯ ಮತ್ತು ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕ ಅನ್ವಯಗಳಲ್ಲಿ ವೃತ್ತಾಕಾರದ ಸ್ಥಾನೀಕರಣವು ಒಂದಾಗಿದೆ. ನೀವು ಒಂದು ಕೇಂದ್ರ ಬಿಂದುವಿನ ಸುತ್ತಲೂ ಅಂಶಗಳನ್ನು ವೃತ್ತದಲ್ಲಿ ಜೋಡಿಸಬಹುದು. ಲೋಡರ್‌ಗಳು, ರೇಡಿಯಲ್ ಮೆನುಗಳು ಅಥವಾ ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕವಾದ ನ್ಯಾವಿಗೇಷನ್ ಸಿಸ್ಟಮ್‌ಗಳನ್ನು ರಚಿಸಲು ಇದು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ.

.container {
  position: relative;
  width: 200px;
  height: 200px;
}

.item {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #3498db;
}

/* ಉತ್ತಮ ನಿಯಂತ್ರಣಕ್ಕಾಗಿ ಸಿಎಸ್‌ಎಸ್‌ ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಬಳಸುವುದು */
:root {
  --item-count: 8;
  --radius: 80px;
}

@property --angle {
  syntax: '';
  inherits: false;
  initial-value: 0deg;
}

.container {
  animation: rotate 10s linear infinite;
}

@keyframes rotate {
  from {--angle: 0deg;}
  to {--angle: 360deg;}
}

/* cos() ಮತ್ತು sin() ಬಳಸಿ ಐಟಂಗಳನ್ನು ಡೈನಾಮಿಕ್ ಆಗಿ ಇರಿಸುವುದು */
.item:nth-child(n) {
  --index: calc(n - 1);
  --angle-item: calc(var(--index) * (360deg / var(--item-count)));
  left: calc(50% + var(--radius) * cos(var(--angle-item)) - 15px); /* 15px ಐಟಂನ ಅರ್ಧ ಅಗಲ */
  top: calc(50% + var(--radius) * sin(var(--angle-item)) - 15px); /* 15px ಐಟಂನ ಅರ್ಧ ಎತ್ತರ */
}

ವಿವರಣೆ:

• ನಾವು position: relative ನೊಂದಿಗೆ ಒಂದು ಕಂಟೇನರ್ ಅನ್ನು ರಚಿಸುತ್ತೇವೆ.
• ಕಂಟೇನರ್‌ನೊಳಗಿನ ಪ್ರತಿಯೊಂದು ಐಟಂ position: absolute ಅನ್ನು ಹೊಂದಿದೆ.
• ಐಟಂಗಳ ಸಂಖ್ಯೆ ಮತ್ತು ವೃತ್ತದ ತ್ರಿಜ್ಯವನ್ನು ನಿಯಂತ್ರಿಸಲು ನಾವು ಸಿಎಸ್‌ಎಸ್‌ ವೇರಿಯಬಲ್‌ಗಳನ್ನು (--item-count, --radius, --angle) ಬಳಸುತ್ತೇವೆ.
• ಪ್ರತಿಯೊಂದು ಐಟಂನ left ಮತ್ತು top ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಕ್ರಮವಾಗಿ cos() ಮತ್ತು sin() ಬಳಸಿ ಲೆಕ್ಕಹಾಕಲಾಗುತ್ತದೆ. ಪ್ರತಿ ಐಟಂನ ಕೋನವನ್ನು ಅದರ ಸೂಚ್ಯಂಕದ ಆಧಾರದ ಮೇಲೆ ನಿರ್ಧರಿಸಲಾಗುತ್ತದೆ.
• ಅಂಶಗಳನ್ನು ಕೇಂದ್ರದ ಸುತ್ತಲೂ ತಿರುಗುವಂತೆ ಮಾಡಲು ಪೋಷಕ ಕಂಟೇನರ್‌ಗೆ ಅನಿಮೇಷನ್ ಸೇರಿಸಲಾಗಿದೆ

ವ್ಯತ್ಯಾಸಗಳು: ವಿಭಿನ್ನ ದೃಶ್ಯ ಪರಿಣಾಮಗಳನ್ನು ರಚಿಸಲು ನೀವು ಐಟಂಗಳ ಸಂಖ್ಯೆ, ತ್ರಿಜ್ಯ, ಮತ್ತು ಬಣ್ಣಗಳನ್ನು ಸುಲಭವಾಗಿ ಮಾರ್ಪಡಿಸಬಹುದು. ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾದ ಸಂವಹನಗಳಿಗಾಗಿ ನೀವು ಪ್ರತಿಯೊಂದು ಐಟಂಗೆ ಪ್ರತ್ಯೇಕವಾಗಿ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಕೂಡ ಸೇರಿಸಬಹುದು.

2. ತರಂಗ ಅನಿಮೇಷನ್‌ಗಳು

ತ್ರಿಕೋನಮಿತೀಯ ಫಂಕ್ಷನ್‌ಗಳು ನಯವಾದ, ಆಂದೋಲನಗೊಳ್ಳುವ ತರಂಗ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ರಚಿಸಲು ಅತ್ಯುತ್ತಮವಾಗಿವೆ. ಇದನ್ನು ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕವಾದ ಲೋಡಿಂಗ್ ಇಂಡಿಕೇಟರ್‌ಗಳು, ಹಿನ್ನೆಲೆ ಅನಿಮೇಷನ್‌ಗಳು, ಅಥವಾ ಸಂವಾದಾತ್ಮಕ ಅಂಶಗಳನ್ನು ರಚಿಸಲು ಬಳಸಬಹುದು.

.wave {
  width: 100%;
  height: 100px;
  overflow: hidden;
  position: relative;
}

.wave::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 100%;
  background-color: #2ecc71;
  animation: wave-move 5s linear infinite;
}

@keyframes wave-move {
  0% {
    transform: translateX(0) translateY(0);
  }
  50% {
    transform: translateX(-25%) translateY(calc(5px * sin(180deg)));
  }
  100% {
    transform: translateX(-50%) translateY(calc(5px * sin(360deg)));
  }
}

ವಿವರಣೆ:

• ತರಂಗ ಪರಿಣಾಮವನ್ನು ಕತ್ತರಿಸಲು ನಾವು overflow: hidden ಗುಣಲಕ್ಷಣದೊಂದಿಗೆ .wave ಕಂಟೇನರ್ ಅನ್ನು ರಚಿಸುತ್ತೇವೆ.
• ::before ಸೂಡೋ-ಎಲಿಮೆಂಟ್ ಸ್ವತಃ ತರಂಗವನ್ನೇ ಪ್ರತಿನಿಧಿಸುತ್ತದೆ.
• wave-move ಅನಿಮೇಷನ್ ತರಂಗದ ಲಂಬವಾದ ಆಂದೋಲನವನ್ನು ರಚಿಸಲು sin() ಅನ್ನು ಬಳಸುತ್ತದೆ.

ಕಸ್ಟಮೈಸೇಷನ್: ತರಂಗ ಪರಿಣಾಮವನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ನೀವು ಅನಿಮೇಷನ್ ಅವಧಿ, ತರಂಗದ ವಿಸ್ತಾರ (5px ಮೌಲ್ಯ), ಮತ್ತು ಬಣ್ಣಗಳನ್ನು ಸರಿಹೊಂದಿಸಬಹುದು.

3. transform: matrix() ಬಳಸಿ ಚಿತ್ರಗಳನ್ನು ವಿರೂಪಗೊಳಿಸುವುದು

cos(), sin(), ಮತ್ತು tan() ಗಳು ನೇರವಾಗಿ `transform: matrix()` ಒಳಗೆ ಬಳಸದಿದ್ದರೂ, ತ್ರಿಕೋನಮಿತೀಯ ಫಂಕ್ಷನ್‌ಗಳ ಆಧಾರದ ಮೇಲೆ ಪೂರ್ವ-ಲೆಕ್ಕಾಚಾರ ಮಾಡಿದ ಮೌಲ್ಯಗಳಿಂದ ಮ್ಯಾಟ್ರಿಕ್ಸ್ ಫಂಕ್ಷನ್ ಬಹಳಷ್ಟು ಪ್ರಯೋಜನ ಪಡೆಯುತ್ತದೆ. `matrix()` ಫಂಕ್ಷನ್ ಟ್ರಾನ್ಸ್‌ಫಾರ್ಮೇಶನ್‌ಗಳ ಮೇಲೆ ಅತ್ಯಂತ ಸೂಕ್ಷ್ಮ ನಿಯಂತ್ರಣವನ್ನು ಅನುಮತಿಸುತ್ತದೆ, ಮತ್ತು ಆಧಾರವಾಗಿರುವ ಗಣಿತವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಸರಳ ತಿರುಗುವಿಕೆಗಳು ಅಥವಾ ಸ್ಕೇಲಿಂಗ್‌ಗಳನ್ನು ಮೀರಿದ ಸಂಕೀರ್ಣ ವಿರೂಪಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ.

.distorted-image {
  width: 300px;
  height: 200px;
  background-image: url('image.jpg'); /* ನಿಮ್ಮ ಚಿತ್ರದೊಂದಿಗೆ ಬದಲಾಯಿಸಿ */
  background-size: cover;
  transition: transform 0.3s ease;
}

.distorted-image:hover {
    /*ಈ ಉದಾಹರಣೆಯು ಮ್ಯಾಟ್ರಿಕ್ಸ್‌ನಲ್ಲಿ ನೇರವಾಗಿ ತ್ರಿಕೋನಮಿತೀಯ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ತೋರಿಸುವುದಿಲ್ಲ. ಆದಾಗ್ಯೂ, ಹೆಚ್ಚು ಸುಧಾರಿತ ಬಳಕೆಯು ಮೌಸ್ ಸ್ಥಾನ, ಸ್ಕ್ರಾಲ್ ಸ್ಥಾನ ಅಥವಾ ಇತರ ವೇರಿಯಬಲ್‌ಗಳ ಆಧಾರದ ಮೇಲೆ cos() ಮತ್ತು sin() ಬಳಸಿ ಮ್ಯಾಟ್ರಿಕ್ಸ್ ಮೌಲ್ಯಗಳನ್ನು ಲೆಕ್ಕಹಾಕಬಹುದು.*/
  transform: matrix(1, 0.2, 0.1, 1, 0, 0); /*ಶಿಯರ್ ಟ್ರಾನ್ಸ್‌ಫಾರ್ಮೇಶನ್‌ನ ಉದಾಹರಣೆ*/
}

ವಿವರಣೆ:

• matrix() ಫಂಕ್ಷನ್ 2D ಟ್ರಾನ್ಸ್‌ಫಾರ್ಮೇಶನ್ ಮ್ಯಾಟ್ರಿಕ್ಸ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ ಆರು ಮೌಲ್ಯಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ. ಈ ಮೌಲ್ಯಗಳು ಸ್ಕೇಲಿಂಗ್, ರೊಟೇಶನ್, ಸ್ಕ್ಯೂಯಿಂಗ್, ಮತ್ತು ಟ್ರಾನ್ಸ್ಲೇಶನ್ ಅನ್ನು ನಿಯಂತ್ರಿಸುತ್ತವೆ.
• ಈ ಮೌಲ್ಯಗಳನ್ನು ಎಚ್ಚರಿಕೆಯಿಂದ ಸರಿಹೊಂದಿಸುವ ಮೂಲಕ, ನೀವು ವಿವಿಧ ವಿರೂಪಣ ಪರಿಣಾಮಗಳನ್ನು ಸಾಧಿಸಬಹುದು. ಮ್ಯಾಟ್ರಿಕ್ಸ್ ಫಂಕ್ಷನ್ ಅನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳಲು ಲೀನಿಯರ್ ಆಲ್ಜಿಬ್ರಾ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಸಹಾಯಕವಾಗಿದೆ.

ಸುಧಾರಿತ ಬಳಕೆ (ಪರಿಕಲ್ಪನಾತ್ಮಕ):

ಮೌಸ್ ಸ್ಥಾನವನ್ನು ಆಧರಿಸಿ matrix() ಮೌಲ್ಯಗಳನ್ನು ಡೈನಾಮಿಕ್ ಆಗಿ ಲೆಕ್ಕಾಚಾರ ಮಾಡುವುದನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಮೌಸ್ ಚಿತ್ರಕ್ಕೆ ಹತ್ತಿರವಾದಂತೆ, ವಿರೂಪಣೆಯು ಹೆಚ್ಚು ಸ್ಪಷ್ಟವಾಗುತ್ತದೆ. ಇದಕ್ಕೆ ಮೌಸ್ ನಿರ್ದೇಶಾಂಕಗಳನ್ನು ಸೆರೆಹಿಡಿಯಲು ಮತ್ತು matrix() ಫಂಕ್ಷನ್‌ಗೆ ಫೀಡ್ ಮಾಡಲು ಸೂಕ್ತವಾದ cos() ಮತ್ತು sin() ಮೌಲ್ಯಗಳನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡಲು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಬೇಕಾಗುತ್ತದೆ.

4. ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸ ಮತ್ತು ಡೈನಾಮಿಕ್ ಲೇಔಟ್‌ಗಳು

ವಿವಿಧ ಸ್ಕ್ರೀನ್ ಗಾತ್ರಗಳಿಗೆ ಸೊಗಸಾಗಿ ಹೊಂದಿಕೊಳ್ಳುವ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ತ್ರಿಕೋನಮಿತೀಯ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸಗಳಲ್ಲಿ ಸಂಯೋಜಿಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ವ್ಯೂಪೋರ್ಟ್ ಅಗಲವನ್ನು ಆಧರಿಸಿ ವೃತ್ತಾಕಾರದ ಮೆನುವಿನ ತ್ರಿಜ್ಯವನ್ನು ನೀವು ಸರಿಹೊಂದಿಸಬಹುದು, ಇದರಿಂದ ಮೆನು ದೊಡ್ಡ ಮತ್ತು ಸಣ್ಣ ಪರದೆಗಳಲ್ಲಿ ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕವಾಗಿ ಮತ್ತು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಉಳಿಯುತ್ತದೆ.

:root {
  --viewport-width: 100vw;
  --min-radius: 50px;
  --max-radius: 150px;
  --calculated-radius: calc(var(--min-radius) + (var(--max-radius) - var(--min-radius)) * (var(--viewport-width) / 1000)); /* 1000px ಗರಿಷ್ಠ ವ್ಯೂಪೋರ್ಟ್ ಅಗಲವನ್ನು ಊಹಿಸಿ */
}

.container {
  position: relative;
  width: 200px;
  height: 200px;
}

.item {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #3498db;
  left: calc(50% + var(--calculated-radius) * cos(calc(var(--index) * (360deg / var(--item-count))))) - 15px); /* 15px ಐಟಂನ ಅರ್ಧ ಅಗಲ */
  top: calc(50% + var(--calculated-radius) * sin(calc(var(--index) * (360deg / var(--item-count))))) - 15px); /* 15px ಐಟಂನ ಅರ್ಧ ಎತ್ತರ */
}

ವಿವರಣೆ:

• ಪ್ರಸ್ತುತ ವ್ಯೂಪೋರ್ಟ್ ಅಗಲವನ್ನು ಸಂಗ್ರಹಿಸಲು ನಾವು --viewport-width ಅನ್ನು ಬಳಸುತ್ತೇವೆ.
• --min-radius ಮತ್ತು --max-radius ವೃತ್ತದ ಕನಿಷ್ಠ ಮತ್ತು ಗರಿಷ್ಠ ತ್ರಿಜ್ಯವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತವೆ.
• --calculated-radius ವ್ಯೂಪೋರ್ಟ್ ಅಗಲವನ್ನು ಆಧರಿಸಿ ತ್ರಿಜ್ಯವನ್ನು ಡೈನಾಮಿಕ್ ಆಗಿ ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತದೆ, ಕನಿಷ್ಠ ಮತ್ತು ಗರಿಷ್ಠ ತ್ರಿಜ್ಯದ ನಡುವೆ ಲೀನಿಯರ್ ಇಂಟರ್ಪೋಲೇಶನ್ ಬಳಸಿ.
• ಬದಲಾವಣೆಗಳನ್ನು ನೋಡಲು ವಿಂಡೋವನ್ನು ಮರುಗಾತ್ರಗೊಳಿಸಿ

ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳು: ನಿರ್ದಿಷ್ಟ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳನ್ನು ಆಧರಿಸಿ ಸಿಎಸ್‌ಎಸ್‌ ವೇರಿಯಬಲ್‌ಗಳ ಮೌಲ್ಯಗಳನ್ನು ಸರಿಹೊಂದಿಸಲು ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸಿಕೊಂಡು ನೀವು ರೆಸ್ಪಾನ್ಸಿವ್ ನಡವಳಿಕೆಯನ್ನು ಮತ್ತಷ್ಟು ಪರಿಷ್ಕರಿಸಬಹುದು.

ಸಲಹೆಗಳು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

• ಸಿಎಸ್‌ಎಸ್‌ ವೇರಿಯಬಲ್‌ಗಳನ್ನು ಬಳಸಿ: ಸಿಎಸ್‌ಎಸ್‌ ವೇರಿಯಬಲ್‌ಗಳು (ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳು) ತ್ರಿಕೋನಮಿತೀಯ ಫಂಕ್ಷನ್‌ಗಳಲ್ಲಿ ಬಳಸುವ ಮೌಲ್ಯಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಮತ್ತು ನವೀಕರಿಸಲು ಸುಲಭಗೊಳಿಸುತ್ತವೆ. ಇದು ಕೋಡ್ ಓದುವಿಕೆಯನ್ನು ಮತ್ತು ನಿರ್ವಹಣೆಯನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ.
• ಕಾರ್ಯಕ್ಷಮತೆಗಾಗಿ ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ: ತ್ರಿಕೋನಮಿತೀಯ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿರುವ ಸಂಕೀರ್ಣ ಅನಿಮೇಷನ್‌ಗಳು ಗಣಕೀಕರಣದ ದೃಷ್ಟಿಯಿಂದ ತೀವ್ರವಾಗಿರಬಹುದು. ಲೆಕ್ಕಾಚಾರಗಳ ಸಂಖ್ಯೆಯನ್ನು ಕಡಿಮೆ ಮಾಡುವ ಮೂಲಕ ಮತ್ತು ಸಾಧ್ಯವಾದಲ್ಲೆಲ್ಲಾ ಹಾರ್ಡ್‌ವೇರ್ ವೇಗವರ್ಧಕವನ್ನು ಬಳಸುವ ಮೂಲಕ (ಉದಾ., transform: translateZ(0) ಬಳಸಿ) ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ.
• ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳನ್ನು ಒದಗಿಸಿ: ಬದಲಾಗುತ್ತಿರುವ ಬ್ರೌಸರ್ ಬೆಂಬಲದಿಂದಾಗಿ, ತ್ರಿಕೋನಮಿತೀಯ ಫಂಕ್ಷನ್‌ಗಳು ಬೆಂಬಲಿಸದ ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳು ಅಥವಾ ಪರಿಸರಗಳಿಗಾಗಿ ಫಾಲ್‌ಬ್ಯಾಕ್ ಕಾರ್ಯವಿಧಾನಗಳನ್ನು ಒದಗಿಸಿ. ಇದು ಸರಳವಾದ ಸಿಎಸ್‌ಎಸ್‌ ತಂತ್ರಗಳನ್ನು ಬಳಸುವುದು ಅಥವಾ ದೃಶ್ಯ ಪರಿಣಾಮದ ಸೌಮ್ಯ ಅವನತಿಯನ್ನು ಒದಗಿಸುವುದನ್ನು ಒಳಗೊಂಡಿರಬಹುದು.
• ಪ್ರವೇಶಸಾಧ್ಯತೆಯನ್ನು ಪರಿಗಣಿಸಿ: ನಿಮ್ಮ ವಿನ್ಯಾಸಗಳು ವಿಕಲಾಂಗರು ಸೇರಿದಂತೆ ಎಲ್ಲಾ ಬಳಕೆದಾರರಿಗೆ ಪ್ರವೇಶಿಸಬಹುದೆಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಎಲ್ಲರಿಗೂ ಗ್ರಹಿಸಲಾಗದ ದೃಶ್ಯ ಪರಿಣಾಮಗಳನ್ನು ಮಾತ್ರ ಅವಲಂಬಿಸುವುದನ್ನು ತಪ್ಪಿಸಿ. ಮಾಹಿತಿ ಮತ್ತು ಕಾರ್ಯವನ್ನು ಪ್ರವೇಶಿಸಲು ಪರ್ಯಾಯ ಮಾರ್ಗಗಳನ್ನು ಒದಗಿಸಿ.
• ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಿ: ಸ್ಥಿರವಾದ ನಡವಳಿಕೆ ಮತ್ತು ಸಕಾರಾತ್ಮಕ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಿಮ್ಮ ವಿನ್ಯಾಸಗಳನ್ನು ವಿವಿಧ ಬ್ರೌಸರ್‌ಗಳು, ಸಾಧನಗಳು, ಮತ್ತು ಸ್ಕ್ರೀನ್ ಗಾತ್ರಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ.

ಸಿಎಸ್‌ಎಸ್‌ ಲೇಔಟ್‌ನ ಭವಿಷ್ಯ

ಸಿಎಸ್‌ಎಸ್‌ ತ್ರಿಕೋನಮಿತೀಯ ಫಂಕ್ಷನ್‌ಗಳು ಸಿಎಸ್‌ಎಸ್‌ ಲೇಔಟ್ ಸಾಮರ್ಥ್ಯಗಳ ವಿಕಾಸದಲ್ಲಿ ಒಂದು ಮಹತ್ವದ ಹೆಜ್ಜೆಯನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತವೆ. ಅವು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಹೆಚ್ಚು ಡೈನಾಮಿಕ್, ಗಣಿತೀಯವಾಗಿ ನಿಖರವಾದ ಮತ್ತು ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕವಾದ ವೆಬ್ ಅನುಭವಗಳನ್ನು ರಚಿಸಲು ಅಧಿಕಾರ ನೀಡುತ್ತವೆ. ಬ್ರೌಸರ್ ಬೆಂಬಲವು ಸುಧಾರಿಸುತ್ತಾ ಹೋದಂತೆ ಮತ್ತು ಡೆವಲಪರ್‌ಗಳು ಈ ಫಂಕ್ಷನ್‌ಗಳ ಬಗ್ಗೆ ಹೆಚ್ಚು ಪರಿಚಿತರಾದಂತೆ, ನಾವು ಭವಿಷ್ಯದಲ್ಲಿ ಇನ್ನಷ್ಟು ನವೀನ ಮತ್ತು ಸೃಜನಾತ್ಮಕ ಅನ್ವಯಗಳನ್ನು ನೋಡುವ ನಿರೀಕ್ಷೆಯಿದೆ. ಸಿಎಸ್‌ಎಸ್‌ನಲ್ಲಿ ನೇರವಾಗಿ ಗಣಿತೀಯ ತತ್ವಗಳನ್ನು ಬಳಸಿಕೊಳ್ಳುವ ಸಾಮರ್ಥ್ಯವು ವೆಬ್ ವಿನ್ಯಾಸ ಮತ್ತು ಅಭಿವೃದ್ಧಿಗೆ ಅತ್ಯಾಕರ್ಷಕ ಹೊಸ ಸಾಧ್ಯತೆಗಳನ್ನು ತೆರೆಯುತ್ತದೆ.

ತೀರ್ಮಾನ

ಸಿಎಸ್‌ಎಸ್‌ ತ್ರಿಕೋನಮಿತೀಯ ಫಂಕ್ಷನ್‌ಗಳು ಸುಧಾರಿತ ಮತ್ತು ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕವಾದ ವೆಬ್ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಒಂದು ಶಕ್ತಿಯುತ ಉಪಕರಣವನ್ನು ಒದಗಿಸುತ್ತವೆ. ಅವುಗಳಿಗೆ ಗಣಿತದ ಪರಿಕಲ್ಪನೆಗಳ ಬಗ್ಗೆ ಸ್ವಲ್ಪ ಹೆಚ್ಚು ತಿಳುವಳಿಕೆ ಬೇಕಾದರೂ, ವಿನ್ಯಾಸದ ನಮ್ಯತೆ ಮತ್ತು ಬಳಕೆದಾರರ ಅನುಭವದ ದೃಷ್ಟಿಯಿಂದ ಸಂಭಾವ್ಯ ಪ್ರಯೋಜನಗಳು ಮಹತ್ವದ್ದಾಗಿವೆ. cos(), sin(), ಮತ್ತು tan() ಗಳೊಂದಿಗೆ ಪ್ರಯೋಗ ಮಾಡುವ ಮೂಲಕ, ನೀವು ಸೃಜನಶೀಲತೆಯ ಹೊಸ ಹಂತಗಳನ್ನು ಅನ್ಲಾಕ್ ಮಾಡಬಹುದು ಮತ್ತು ನಿಜವಾಗಿಯೂ ವಿಶಿಷ್ಟ ಮತ್ತು ಸಂವಾದಾತ್ಮಕ ವೆಬ್ ಅನುಭವಗಳನ್ನು ನಿರ್ಮಿಸಬಹುದು.

ಸಿಎಸ್‌ಎಸ್‌ ತ್ರಿಕೋನಮಿತೀಯ ಫಂಕ್ಷನ್‌ಗಳೊಂದಿಗೆ ನಿಮ್ಮ ಪ್ರಯಾಣವನ್ನು ಪ್ರಾರಂಭಿಸುವಾಗ, ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ, ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಸೇಶನ್, ಪ್ರವೇಶಸಾಧ್ಯತೆ ಮತ್ತು ಸಂಪೂರ್ಣ ಪರೀಕ್ಷೆಗೆ ಆದ್ಯತೆ ನೀಡಲು ಮರೆಯದಿರಿ. ಈ ಪರಿಗಣನೆಗಳನ್ನು ಗಮನದಲ್ಲಿಟ್ಟುಕೊಂಡು, ಆಧುನಿಕ ವೆಬ್ ಅಭಿವೃದ್ಧಿಯ ಗಡಿಗಳನ್ನು ತಳ್ಳುವ ಬಲವಾದ ಮತ್ತು ಗಣಿತೀಯವಾಗಿ ಚಾಲಿತ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸಲು ನೀವು ಈ ಶಕ್ತಿಯುತ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಆತ್ಮವಿಶ್ವಾಸದಿಂದ ಬಳಸಿಕೊಳ್ಳಬಹುದು.

ಪ್ರಯೋಗ ಮಾಡಲು ಮತ್ತು ಸಾಧ್ಯತೆಗಳನ್ನು ಅನ್ವೇಷಿಸಲು ಹಿಂಜರಿಯಬೇಡಿ. ಗಣಿತೀಯವಾಗಿ ಚಾಲಿತ ಸಿಎಸ್‌ಎಸ್‌ ಲೇಔಟ್ ಜಗತ್ತು ವಿಶಾಲವಾಗಿದೆ ಮತ್ತು ಸಾಮರ್ಥ್ಯದಿಂದ ತುಂಬಿದೆ. ಸಂತೋಷದ ಕೋಡಿಂಗ್!