CSS ತ್ರಿಕೋನಮಿತೀಯ ಕಾರ್ಯಗಳು: ಗಣಿತೀಯ ವಿನ್ಯಾಸ ಲೆಕ್ಕಾಚಾರಗಳನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳುವುದು

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

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

CSS ಗೆ ಹೋಗುವ ಮೊದಲು, ತ್ರಿಕೋನಮಿತಿಯ ಮೂಲ ಪರಿಕಲ್ಪನೆಗಳನ್ನು ಸಂಕ್ಷಿಪ್ತವಾಗಿ ಪರಿಶೀಲಿಸೋಣ. ಲಂಬಕೋನ ತ್ರಿಕೋನದಲ್ಲಿ:

• ಸೈನ್ (sin): ಕೋನಕ್ಕೆ ಎದುರಾಗಿರುವ ಬದಿಯ ಉದ್ದಕ್ಕೂ ಕರ್ಣದ ಉದ್ದದ ಅನುಪಾತ.
• ಕೋಸೈನ್ (cos): ಕೋನಕ್ಕೆ ಹೊಂದಿಕೊಂಡಿರುವ ಬದಿಯ ಉದ್ದಕ್ಕೂ ಕರ್ಣದ ಉದ್ದದ ಅನುಪಾತ.
• ಟ್ಯಾಂಜೆಂಟ್ (tan): ಕೋನಕ್ಕೆ ಎದುರಾಗಿರುವ ಬದಿಯ ಉದ್ದಕ್ಕೂ ಕೋನಕ್ಕೆ ಹೊಂದಿಕೊಂಡಿರುವ ಬದಿಯ ಉದ್ದದ ಅನುಪಾತ.

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

CSS ತ್ರಿಕೋನಮಿತೀಯ ಕಾರ್ಯಗಳು: ಮೂಲಭೂತ ಅಂಶಗಳು

CSS ಈ ತ್ರಿಕೋನಮಿತೀಯ ಕಾರ್ಯಗಳಿಗೆ ನೇರ ಪ್ರವೇಶವನ್ನು ಒದಗಿಸುತ್ತದೆ, ನಿಮ್ಮ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳಲ್ಲಿ ಲೆಕ್ಕಾಚಾರಗಳನ್ನು ನಿರ್ವಹಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಸಿಂಟ್ಯಾಕ್ಸ್ ನೇರವಾಗಿರುತ್ತದೆ:

• sin(angle): ಕೋನದ ಸೈನ್ ಅನ್ನು ಹಿಂದಿರುಗಿಸುತ್ತದೆ.
• cos(angle): ಕೋನದ ಕೋಸೈನ್ ಅನ್ನು ಹಿಂದಿರುಗಿಸುತ್ತದೆ.
• tan(angle): ಕೋನದ ಟ್ಯಾಂಜೆಂಟ್ ಅನ್ನು ಹಿಂದಿರುಗಿಸುತ್ತದೆ.

angle ಅನ್ನು ಡಿಗ್ರಿಗಳು (deg), ರೇಡಿಯನ್‌ಗಳು (rad), ಗ್ರೇಡಿಯನ್‌ಗಳು (grad), ಅಥವಾ ಟರ್ನ್‌ಗಳಲ್ಲಿ (turn) ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು. ನೀವು ಆಯ್ಕೆಮಾಡುವ ಘಟಕದೊಂದಿಗೆ ಸ್ಥಿರವಾಗಿರುವುದು ಬಹಳ ಮುಖ್ಯ. ಉದಾಹರಣೆಗೆ:

            
.element {
  width: calc(100px * cos(45deg));
  height: calc(100px * sin(45deg));
}

            

              
                Copy
              
            
          

ಈ ಕೋಡ್ ತುಣುಕು ಕ್ರಮವಾಗಿ 45 ಡಿಗ್ರಿಗಳ ಕೋಸೈನ್ ಮತ್ತು ಸೈನ್ ಆಧಾರದ ಮೇಲೆ ಒಂದು ಅಂಶದ ಅಗಲ ಮತ್ತು ಎತ್ತರವನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತದೆ. ಫಲಿತಾಂಶವು ಅಗಲ ಮತ್ತು ಎತ್ತರ ಎರಡಕ್ಕೂ ಸರಿಸುಮಾರು 70.71px ಆಗಿರುತ್ತದೆ.

CSS ತ್ರಿಕೋನಮಿತೀಯ ಕಾರ್ಯಗಳ ಪ್ರಾಯೋಗಿಕ ಅನ್ವಯಗಳು

CSS ತ್ರಿಕೋನಮಿತೀಯ ಕಾರ್ಯಗಳು ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ ಸೃಜನಾತ್ಮಕ ಸಾಧ್ಯತೆಗಳನ್ನು ತೆರೆಯುತ್ತವೆ. ಕೆಲವು ಪ್ರಾಯೋಗಿಕ ಅನ್ವಯಗಳು ಇಲ್ಲಿವೆ:

1. ವೃತ್ತಾಕಾರದ ವಿನ್ಯಾಸಗಳು

ವೃತ್ತಾಕಾರದ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸುವುದು ತ್ರಿಕೋನಮಿತೀಯ ಕಾರ್ಯಗಳಿಗೆ ಒಂದು ಶ್ರೇಷ್ಠ ಬಳಕೆಯಾಗಿದೆ. ಅಂಶಗಳ x ಮತ್ತು y ನಿರ್ದೇಶಾಂಕಗಳನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡಲು ನೀವು sin() ಮತ್ತು cos() ಅನ್ನು ಬಳಸಿಕೊಂಡು ಕೇಂದ್ರ ಬಿಂದುವಿನ ಸುತ್ತ ಅವುಗಳನ್ನು ಇರಿಸಬಹುದು.

ಉದಾಹರಣೆ: ವೃತ್ತಾಕಾರದ ಮೆನು ರಚಿಸುವುದು

ಮೆನು ಐಟಂಗಳು ಕೇಂದ್ರ ಬಟನ್ ಸುತ್ತ ಜೋಡಿಸಲಾದ ವೃತ್ತಾಕಾರದ ಮೆನುವನ್ನು ನೀವು ರಚಿಸಲು ಬಯಸುತ್ತೀರಿ ಎಂದು ಊಹಿಸಿ. ಇದನ್ನು ನೀವು ಹೇಗೆ ಸಾಧಿಸಬಹುದು ಎಂಬುದು ಇಲ್ಲಿದೆ:

            
<div class="menu-container">
  <button class="menu-toggle">Menu</button>
  <button class="menu-item">Item 1</button>
  <button class="menu-item">Item 2</button>
  <button class="menu-item">Item 3</button>
  <button class="menu-item">Item 4</button>
</div>

            

              
                Copy
              
            
          

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

.menu-toggle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.menu-item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Initially hide the items */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.menu-container.open .menu-item {
    opacity: 1; /* Make them visible when menu is open */
}

/* Using CSS variables for easy customization */
:root {
    --menu-radius: 80px; /* Radius of the circle */
    --number-of-items: 4; /* Number of menu items */
}

/* Dynamically calculate position using trigonometric functions */
.menu-item:nth-child(2) {
    --angle: calc(360deg / var(--number-of-items) * 0); /*First item starts at 0 degrees*/
    left: calc(50% + var(--menu-radius) * cos(var(--angle)));
    top: calc(50% + var(--menu-radius) * sin(var(--angle)));
}

.menu-item:nth-child(3) {
    --angle: calc(360deg / var(--number-of-items) * 1);
    left: calc(50% + var(--menu-radius) * cos(var(--angle)));
    top: calc(50% + var(--menu-radius) * sin(var(--angle)));
}

.menu-item:nth-child(4) {
    --angle: calc(360deg / var(--number-of-items) * 2);
    left: calc(50% + var(--menu-radius) * cos(var(--angle)));
    top: calc(50% + var(--menu-radius) * sin(var(--angle)));
}

.menu-item:nth-child(5) {
    --angle: calc(360deg / var(--number-of-items) * 3);
    left: calc(50% + var(--menu-radius) * cos(var(--angle)));
    top: calc(50% + var(--menu-radius) * sin(var(--angle)));
}

            

              
                Copy
              
            
          

ಈ CSS ವೃತ್ತದ ತ್ರಿಜ್ಯವನ್ನು ಮತ್ತು ಮೆನು ಐಟಂಗಳ ಸಂಖ್ಯೆಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು CSS ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಬಳಸುತ್ತದೆ. ಪ್ರತಿ ಐಟಂ ಅನ್ನು ಕೇಂದ್ರ ಬಟನ್ ಸುತ್ತಲೂ ಇರಿಸಲು cos() ಮತ್ತು sin() ಅನ್ನು ಬಳಸಿಕೊಂಡು left ಮತ್ತು top ಗುಣಲಕ್ಷಣಗಳನ್ನು ಕ್ರಮವಾಗಿ ಲೆಕ್ಕಹಾಕಲಾಗುತ್ತದೆ. nth-child ಸೆಲೆಕ್ಟರ್ ಈ ಲೆಕ್ಕಾಚಾರಗಳನ್ನು ಪ್ರತಿ ಮೆನು ಐಟಂಗೆ ಪ್ರತ್ಯೇಕವಾಗಿ ಅನ್ವಯಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. JavaScript ಅನ್ನು ಬಳಸಿಕೊಂಡು ನೀವು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ .menu-container ಗೆ "open" ವರ್ಗವನ್ನು ಸುಲಭವಾಗಿ ಸೇರಿಸಬಹುದು ಮತ್ತು ಗೋಚರತೆಯನ್ನು ಟಾಗಲ್ ಮಾಡಬಹುದು.

2. ಅಲೆಯಂತಹ ಅನಿಮೇಷನ್‌ಗಳು

ತ್ರಿಕೋನಮಿತೀಯ ಕಾರ್ಯಗಳು ನಯವಾದ, ನೈಸರ್ಗಿಕವಾಗಿ ಕಾಣುವ ಅಲೆಯಂತಹ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ರಚಿಸಲು ಅತ್ಯುತ್ತಮವಾಗಿವೆ. sin() ಅಥವಾ cos() ನೊಂದಿಗೆ transform: translateY() ಗುಣಲಕ್ಷಣವನ್ನು ಕುಶಲತೆಯಿಂದ ನಿರ್ವಹಿಸುವ ಮೂಲಕ, ನೀವು ಅಂಶಗಳನ್ನು ಅಲೆಯಂತಹ ಚಲನೆಯಲ್ಲಿ ಮೇಲೆ ಮತ್ತು ಕೆಳಗೆ ಚಲಿಸುವಂತೆ ಮಾಡಬಹುದು.

ಉದಾಹರಣೆ: ಅಲೆಯಂತಹ ಪಠ್ಯ ಅನಿಮೇಷನ್ ರಚಿಸುವುದು

ಪ್ರತಿ ಅಕ್ಷರವು ಸೈನೋಸೈಡಲ್ ಮಾದರಿಯಲ್ಲಿ ಲಂಬವಾಗಿ ಚಲಿಸುವ ಅಲೆಯಂತಹ ಪಠ್ಯ ಅನಿಮೇಷನ್ ಅನ್ನು ಹೇಗೆ ರಚಿಸುವುದು ಎಂಬುದು ಇಲ್ಲಿದೆ:

            
<div class="wavy-text">
  <span style="--delay: 0.1s">H</span>
  <span style="--delay: 0.2s">e</span>
  <span style="--delay: 0.3s">l</span>
  <span style="--delay: 0.4s">l</span>
  <span style="--delay: 0.5s">o</span>
</div>

            

              
                Copy
              
            
          

            
.wavy-text {
  display: flex;
}

.wavy-text span {
  display: inline-block;
  animation: wave 1s infinite alternate;
  /* Use CSS variables for individual delays */
  animation-delay: var(--delay);
}

@keyframes wave {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(10px);
  }
}

            

              
                Copy
              
            
          

            
/* More complex wavy animation using CSS variables and sin() */
@keyframes wave {
    0% {
        transform: translateY(calc(5px * sin(0)));
    }
    100% {
        transform: translateY(calc(5px * sin(360deg)));
    }
}

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಪ್ರತಿ ಅಕ್ಷರವನ್ನು span ಅಂಶದಲ್ಲಿ ಸುತ್ತುವರಿಯಲಾಗಿದೆ, ಮತ್ತು ಅನಿಮೇಷನ್ ಅನ್ನು ವಿಳಂಬಗೊಳಿಸಲು CSS ವೇರಿಯೇಬಲ್ --delay ಅನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. wave ಕೀಫ್ರೇಮ್‌ಗಳು sin() ಅನ್ನು ಬಳಸಿಕೊಂಡು translateY ಗುಣಲಕ್ಷಣವನ್ನು ಅನಿಮೇಟ್ ಮಾಡುತ್ತವೆ, ಇದು ನಯವಾದ ಅಲೆಯಂತಹ ಚಲನೆಯನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ. ಫಲಿತಾಂಶವು ಸೌಮ್ಯವಾದ ಮತ್ತು ಆಕರ್ಷಕವಾದ ಅನಿಮೇಷನ್ ಹೊಂದಿರುವ ಪಠ್ಯವಾಗಿದ್ದು, ಶೀರ್ಷಿಕೆಗಳು, ಪರಿಚಯಗಳು ಅಥವಾ ಸಂವಾದಾತ್ಮಕ ಅಂಶಗಳಿಗೆ ಸೂಕ್ತವಾಗಿದೆ.

3. ಡೈನಾಮಿಕ್ ಆಕಾರಗಳು ಮತ್ತು ಮಾದರಿಗಳು

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

ಉದಾಹರಣೆ: ಸ್ಟಾರ್‌ಬರ್ಸ್ಟ್ ಮಾದರಿಯನ್ನು ರಚಿಸುವುದು

CSS ಗ್ರೇಡಿಯಂಟ್‌ಗಳು ಮತ್ತು ತ್ರಿಕೋನಮಿತೀಯ ಕಾರ್ಯಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಸ್ಟಾರ್‌ಬರ್ಸ್ಟ್ ಮಾದರಿಯನ್ನು ಹೇಗೆ ರಚಿಸುವುದು ಎಂಬುದು ಇಲ್ಲಿದೆ:

            
<div class="starburst"></div>

            

              
                Copy
              
            
          

            
.starburst {
  width: 200px;
  height: 200px;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0.8) 0deg, /* Almost transparent white */
    rgba(255, 255, 255, 0.8) calc(360deg / 16), /* Angle determines number of points */
    transparent calc(360deg / 16),
    transparent calc(360deg / 8) /* Gap between lines */
  );
  border-radius: 50%;
}

            

              
                Copy
              
            
          

ಈ ಕೋಡ್ repeating-conic-gradient ಅನ್ನು ಬಳಸಿಕೊಂಡು ಕೇಂದ್ರದಿಂದ ಹೊರಹೊಮ್ಮುವ ರೇಖೆಗಳ ಸರಣಿಯನ್ನು ರಚಿಸುತ್ತದೆ. ಸಮ್ಮಿತೀಯ ಸ್ಟಾರ್‌ಬರ್ಸ್ಟ್ ಮಾದರಿಯನ್ನು ರಚಿಸಲು ಕೋನಗಳನ್ನು ಲೆಕ್ಕಹಾಕಲಾಗುತ್ತದೆ. ಗ್ರೇಡಿಯಂಟ್ ಬಣ್ಣಗಳು, ಕೋನಗಳು ಮತ್ತು ಪುನರಾವರ್ತಿತ ಮಾದರಿಗಳನ್ನು ಕುಶಲತೆಯಿಂದ ನಿರ್ವಹಿಸುವ ಮೂಲಕ ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಮತ್ತು ಜಟಿಲ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸಲು ಈ ತಂತ್ರವನ್ನು ವಿಸ್ತರಿಸಬಹುದು. `360deg / 16` ಮೌಲ್ಯವನ್ನು ಹೊಂದಿಸುವುದರಿಂದ ನಕ್ಷತ್ರದ ಬಿಂದುಗಳ ಸಂಖ್ಯೆಯನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ, ಮತ್ತು ಬಣ್ಣಗಳನ್ನು ಹೊಂದಿಸುವುದರಿಂದ ವಿಭಿನ್ನ ದೃಶ್ಯ ಶೈಲಿಗಳನ್ನು ರಚಿಸುತ್ತದೆ.

4. ಅಂಶಗಳನ್ನು ಸಂಕೀರ್ಣ ರೀತಿಯಲ್ಲಿ ತಿರುಗಿಸುವುದು

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

ಉದಾಹರಣೆ: ಮೌಸ್ ಕರ್ಸರ್ ಕಡೆಗೆ ಬಾಣವನ್ನು ತಿರುಗಿಸುವುದು

ಈ ಉದಾಹರಣೆಯು ಮೌಸ್ ಸ್ಥಾನವನ್ನು ಪಡೆಯಲು JavaScript ಅನ್ನು ಬಳಸುತ್ತದೆ ಮತ್ತು ಕರ್ಸರ್ ಕಡೆಗೆ ಬಾಣದ ಅಂಶವನ್ನು ಯಾವಾಗಲೂ ತೋರಿಸುವಂತೆ ತಿರುಗಿಸಲು CSS ಅನ್ನು ಬಳಸುತ್ತದೆ. ಇದಕ್ಕೆ ಆರ್ಕ್‌ಟ್ಯಾಂಜೆಂಟ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ಸಾಪೇಕ್ಷ ಸ್ಥಾನಗಳ ಆಧಾರದ ಮೇಲೆ ಕೋನವನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುವುದು ಅಗತ್ಯವಾಗಿರುತ್ತದೆ.

            
<div class="arrow-container">
  <div class="arrow"></div>
</div>

            

              
                Copy
              
            
          

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

.arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 40px solid red;
  transform-origin: 50% 0%; /* Rotate around the base */
  transform: translate(-50%, -50%) rotate(0deg); /* Initial rotation */
}

            

              
                Copy
              
            
          

            
// JavaScript to handle the mouse movement and rotation
const arrow = document.querySelector('.arrow');
const arrowContainer = document.querySelector('.arrow-container');

arrowContainer.addEventListener('mousemove', (e) => {
  const containerRect = arrowContainer.getBoundingClientRect();
  const centerX = containerRect.left + containerRect.width / 2;
  const centerY = containerRect.top + containerRect.height / 2;

  const angle = Math.atan2(e.clientY - centerY, e.clientX - centerX) * 180 / Math.PI;

  arrow.style.transform = `translate(-50%, -50%) rotate(${angle + 90}deg)`; // Adding 90deg to account for initial arrow direction
});

            

              
                Copy
              
            
          

JavaScript Math.atan2 ಅನ್ನು ಬಳಸಿಕೊಂಡು ಬಾಣದ ಕಂಟೇನರ್‌ನ ಕೇಂದ್ರ ಮತ್ತು ಮೌಸ್ ಸ್ಥಾನದ ನಡುವಿನ ಕೋನವನ್ನು ಲೆಕ್ಕಹಾಕುತ್ತದೆ, ಇದು ಆರ್ಕ್‌ಟ್ಯಾಂಜೆಂಟ್‌ಗೆ ಹೋಲುತ್ತದೆ ಆದರೆ ಎಲ್ಲಾ ಕ್ವಾಡ್ರೆಂಟ್‌ಗಳನ್ನು ಸರಿಯಾಗಿ ನಿರ್ವಹಿಸುತ್ತದೆ. ನಂತರ ಫಲಿತಾಂಶವನ್ನು ಡಿಗ್ರಿಗಳಾಗಿ ಪರಿವರ್ತಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಬಾಣಕ್ಕೆ CSS ಟ್ರಾನ್ಸ್‌ಫಾರ್ಮ್ ಆಗಿ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ, ಇದರಿಂದಾಗಿ ಅದು ತಿರುಗುತ್ತದೆ ಮತ್ತು ಕರ್ಸರ್ ಕಡೆಗೆ ತೋರಿಸುತ್ತದೆ. transform-origin ಅನ್ನು ಬಾಣದ ಬುಡದ ಸುತ್ತ ತಿರುಗುವಿಕೆ ಸಂಭವಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಹೊಂದಿಸಲಾಗಿದೆ.

ಪರಿಗಣನೆಗಳು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

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

ಜಾಗತಿಕ ದೃಷ್ಟಿಕೋನಗಳು ಮತ್ತು ಬಳಕೆಯ ಪ್ರಕರಣಗಳು

ಗಣಿತೀಯ ವಿನ್ಯಾಸದ ತತ್ವಗಳು ಸಾರ್ವತ್ರಿಕವಾಗಿ ಅನ್ವಯಿಸುತ್ತವೆ, ಆದರೆ ಅವುಗಳ ಅನುಷ್ಠಾನವು ಸಾಂಸ್ಕೃತಿಕ ಮತ್ತು ವಿನ್ಯಾಸ ಆದ್ಯತೆಗಳನ್ನು ಅವಲಂಬಿಸಿ ಬದಲಾಗಬಹುದು. ಉದಾಹರಣೆಗೆ:

• ಬಲದಿಂದ ಎಡಕ್ಕೆ (RTL) ಭಾಷೆಗಳು: RTL ಭಾಷೆಗಳೊಂದಿಗೆ (ಉದಾಹರಣೆಗೆ, ಅರೇಬಿಕ್, ಹೀಬ್ರೂ) ಕೆಲಸ ಮಾಡುವಾಗ, ವಿನ್ಯಾಸವು ಸರಿಯಾಗಿ ಪ್ರತಿಬಿಂಬಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಿಮ್ಮ ಲೆಕ್ಕಾಚಾರಗಳ ಕೋನಗಳು ಮತ್ತು ದಿಕ್ಕುಗಳನ್ನು ಸರಿಹೊಂದಿಸಬೇಕಾಗಬಹುದು. LTR ಮತ್ತು RTL ಪರಿಸರಗಳಲ್ಲಿ ಸರಿಯಾದ ವಿನ್ಯಾಸವನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ತಾರ್ಕಿಕ ಗುಣಲಕ್ಷಣಗಳನ್ನು (ಉದಾಹರಣೆಗೆ, start ಮತ್ತು end, left ಮತ್ತು right ಬದಲಿಗೆ) ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.
• ವಿಭಿನ್ನ ವಿನ್ಯಾಸ ಸೌಂದರ್ಯಶಾಸ್ತ್ರ: ವಿನ್ಯಾಸ ಸೌಂದರ್ಯಶಾಸ್ತ್ರವು ಸಂಸ್ಕೃತಿಗಳಾದ್ಯಂತ ಗಣನೀಯವಾಗಿ ಬದಲಾಗುತ್ತದೆ. ವೃತ್ತಾಕಾರದ ವಿನ್ಯಾಸಗಳು ಕೆಲವು ಪ್ರದೇಶಗಳಲ್ಲಿ ಜನಪ್ರಿಯವಾಗಿದ್ದರೂ, ಇತರರು ಹೆಚ್ಚು ರೇಖೀಯ ಅಥವಾ ಗ್ರಿಡ್-ಆಧಾರಿತ ವಿನ್ಯಾಸಗಳನ್ನು ಆದ್ಯತೆ ನೀಡಬಹುದು. ನಿಮ್ಮ ಉದ್ದೇಶಿತ ಪ್ರೇಕ್ಷಕರ ನಿರ್ದಿಷ್ಟ ವಿನ್ಯಾಸ ಆದ್ಯತೆಗಳಿಗೆ ಸರಿಹೊಂದುವಂತೆ ತ್ರಿಕೋನಮಿತೀಯ ಕಾರ್ಯಗಳ ನಿಮ್ಮ ಬಳಕೆಯನ್ನು ಹೊಂದಿಸಿ.
• ಪ್ರವೇಶಿಸುವಿಕೆ ಪರಿಗಣನೆಗಳು: ಪ್ರವೇಶಿಸುವಿಕೆ ಮಾನದಂಡಗಳು ಮತ್ತು ಮಾರ್ಗಸೂಚಿಗಳು ದೇಶದಿಂದ ದೇಶಕ್ಕೆ ಸ್ವಲ್ಪ ಬದಲಾಗಬಹುದು. ನಿಮ್ಮ ವಿನ್ಯಾಸಗಳು ನಿಮ್ಮ ಉದ್ದೇಶಿತ ಮಾರುಕಟ್ಟೆಗಳಲ್ಲಿ ಸಂಬಂಧಿತ ಪ್ರವೇಶಿಸುವಿಕೆ ಮಾನದಂಡಗಳನ್ನು ಪಾಲಿಸುತ್ತವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.

ಉದಾಹರಣೆ: RTL ಭಾಷೆಗಳಿಗಾಗಿ ವೃತ್ತಾಕಾರದ ಮೆನುವನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವುದು

RTL ಭಾಷೆಯಲ್ಲಿ, ವೃತ್ತಾಕಾರದ ಮೆನುವಿನಲ್ಲಿರುವ ಮೆನು ಐಟಂಗಳನ್ನು ವಿರುದ್ಧ ದಿಕ್ಕಿನಲ್ಲಿ ಇರಿಸಬೇಕಾಗಬಹುದು. ತ್ರಿಕೋನಮಿತೀಯ ಲೆಕ್ಕಾಚಾರಗಳಲ್ಲಿ ಬಳಸಿದ ಕೋನಗಳನ್ನು ಸರಳವಾಗಿ ತಿರುಗಿಸುವ ಮೂಲಕ ಅಥವಾ ಸಂಪೂರ್ಣ ಮೆನುವನ್ನು ಪ್ರತಿಬಿಂಬಿಸಲು CSS ಟ್ರಾನ್ಸ್‌ಫಾರ್ಮ್‌ಗಳನ್ನು ಬಳಸುವ ಮೂಲಕ ಇದನ್ನು ಸಾಧಿಸಬಹುದು.

            
/* Add this to the .menu-container */
.menu-container[dir="rtl"] .menu-item {
    /* Option 1: Flip the calculations */
    /* left: calc(50% - var(--menu-radius) * cos(var(--angle)));  */
    
    /* Option 2: Use transform: scaleX(-1)  */
    transform: translate(-50%, -50%) scaleX(-1); /* Ensure initial translation is accounted for */
}

            

              
                Copy
              
            
          

ತೀರ್ಮಾನ

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

ಈ ತಂತ್ರಗಳೊಂದಿಗೆ ಪ್ರಯೋಗ ಮಾಡಿ, ತ್ರಿಕೋನಮಿತೀಯ ಕಾರ್ಯಗಳು ಮತ್ತು CSS ಗುಣಲಕ್ಷಣಗಳ ವಿಭಿನ್ನ ಸಂಯೋಜನೆಗಳನ್ನು ಅನ್ವೇಷಿಸಿ, ಮತ್ತು ಗಣಿತೀಯ ವಿನ್ಯಾಸ ಲೆಕ್ಕಾಚಾರಗಳಲ್ಲಿ ಅಡಗಿರುವ ಅಂತ್ಯವಿಲ್ಲದ ಸೃಜನಾತ್ಮಕ ಸಾಮರ್ಥ್ಯವನ್ನು ಕಂಡುಕೊಳ್ಳಿ. CSS ತ್ರಿಕೋನಮಿತೀಯ ಕಾರ್ಯಗಳ ಶಕ್ತಿಯನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ ಮತ್ತು ನಿಮ್ಮ ವೆಬ್ ವಿನ್ಯಾಸಗಳನ್ನು ಮುಂದಿನ ಹಂತಕ್ಕೆ ಏರಿಸಿ.