CSS முக்கோணவியல் சார்புகள்: டைனமிக் வடிவமைப்புகளுக்கான கணித லேஅவுட் கணக்கீடுகள்

வழக்கமாக ஸ்டேடிக் உறுப்புகளை ஸ்டைல் செய்வதற்காக அறியப்பட்ட CSS, டைனமிக் மற்றும் ரெஸ்பான்சிவ் வலை வடிவமைப்பிற்கான சக்திவாய்ந்த கருவிகளை வழங்கும்படி பரிணமித்துள்ளது. இவற்றில் முக்கோணவியல் சார்புகளும் அடங்கும், இவை டெவலப்பர்கள் தங்கள் CSS-க்குள் நேரடியாக கணிதக் கொள்கைகளைப் பயன்படுத்த அனுமதிக்கின்றன. இந்தக்கட்டுரை, `sin()`, `cos()`, `tan()`, `asin()`, `acos()`, `atan()`, மற்றும் `atan2()` ஆகியவற்றை எவ்வாறு பயன்படுத்தி சிக்கலான, டைனமிக் மற்றும் கணித ரீதியாக துல்லியமான லேஅவுட்களை உருவாக்குவது என்பதை ஆராய்கிறது.

CSS முக்கோணவியல் சார்புகளைப் புரிந்துகொள்ளுதல்

CSS-இல் உள்ள முக்கோணவியல் சார்புகள், கோணங்களின் அடிப்படையில் கணக்கீடுகளைச் செய்ய உங்களை அனுமதிக்கின்றன, இதன் விளைவாக `transform`, `width`, `height` போன்ற பல்வேறு CSS பண்புகளுக்குப் பயன்படுத்தக்கூடிய மதிப்புகள் கிடைக்கின்றன. இது வட்ட வடிவ லேஅவுட்கள், சிக்கலான அனிமேஷன்கள் மற்றும் வெவ்வேறு திரை அளவுகளுக்கு கணித ரீதியாகத் தங்களை மாற்றியமைத்துக் கொள்ளும் ரெஸ்பான்சிவ் வடிவமைப்புகளை உருவாக்குவதற்கான வாய்ப்புகளைத் திறக்கிறது.

முக்கிய சார்புகள்: sin(), cos(), மற்றும் tan()

இந்த சார்புகளே முக்கோணவியல் கணக்கீடுகளின் அடித்தளமாகும்:

• `sin(angle)`: கோணத்தின் சைன் (sine) மதிப்பை வழங்கும். கோணம் `deg` (டிகிரி), `rad` (ரேடியன்), `grad` (கிரேடியன்) அல்லது `turn` (சுற்றுகளின் எண்ணிக்கை) போன்ற அலகுகளில் குறிப்பிடப்பட வேண்டும். சைன் மதிப்புகள் -1 முதல் 1 வரை இருக்கும்.
• `cos(angle)`: கோணத்தின் கோசைன் (cosine) மதிப்பை வழங்கும். `sin()` போலவே, கோணமும் அலகுகளில் குறிப்பிடப்பட வேண்டும். கோசைன் மதிப்புகளும் -1 முதல் 1 வரை இருக்கும்.
• `tan(angle)`: கோணத்தின் டேன்ஜென்ட் (tangent) மதிப்பை வழங்கும். கோணம் அலகுகளில் குறிப்பிடப்படுகிறது. டேன்ஜென்ட் மதிப்புகள் எதிர்மறை முடிவிலி முதல் நேர்மறை முடிவிலி வரை இருக்கலாம்.

தலைகீழ் முக்கோணவியல் சார்புகள்: asin(), acos(), atan(), மற்றும் atan2()

தலைகீழ் முக்கோணவியல் சார்புகள், அறியப்பட்ட விகிதத்தின் அடிப்படையில் கோணத்தைக் கணக்கிட உங்களை அனுமதிக்கின்றன:

• `asin(number)`: ஒரு எண்ணின் ஆர்க்சைன் (inverse sine) மதிப்பை வழங்கும். எண் -1 மற்றும் 1-க்கு இடையில் இருக்க வேண்டும். இதன் விளைவு ரேடியன்களில் ஒரு கோணமாகும்.
• `acos(number)`: ஒரு எண்ணின் ஆர்க்கோசைன் (inverse cosine) மதிப்பை வழங்கும். எண் -1 மற்றும் 1-க்கு இடையில் இருக்க வேண்டும். இதன் விளைவு ரேடியன்களில் ஒரு கோணமாகும்.
• `atan(number)`: ஒரு எண்ணின் ஆர்க்டேன்ஜென்ட் (inverse tangent) மதிப்பை வழங்கும். இதன் விளைவு ரேடியன்களில் ஒரு கோணமாகும்.
• `atan2(y, x)`: y/x-இன் ஆர்க்டேன்ஜென்ட்டை வழங்கும், இரு ஆர்கியுமென்ட்களின் குறிகளையும் பயன்படுத்தி முடிவின் காற்பகுதியைத் தீர்மானிக்கிறது. கோஆர்டினேட்களைக் கையாளும்போது சரியான கோணத்தைத் தீர்மானிக்க இது மிகவும் முக்கியமானது. இதன் விளைவு ரேடியன்களில் ஒரு கோணமாகும்.

நடைமுறைப் பயன்பாடுகள் மற்றும் எடுத்துக்காட்டுகள்

CSS முக்கோணவியல் சார்புகளின் பல நடைமுறைப் பயன்பாடுகளை ஆராய்வோம்.

1. ஒரு வட்ட வடிவ லேஅவுட்டை உருவாக்குதல்

ஒரு பொதுவான பயன்பாடு, உறுப்புகளை ஒரு வட்டத்தில் அமைப்பதாகும். ஒவ்வொரு உறுப்பின் நிலை அதன் இன்டெக்ஸ் மற்றும் மொத்த உறுப்புகளின் எண்ணிக்கையின் அடிப்படையில் கணக்கிடப்பட்டு, வட்டத்தின் மையத்தைப் பொறுத்து x மற்றும் y கோஆர்டினேட்களைத் தீர்மானிக்க `sin()` மற்றும் `cos()` ஆகியவற்றைப் பயன்படுத்தி இதை அடையலாம்.

HTML:

<div class="circle-container">
 <div class="item">1</div>
 <div class="item">2</div>
 <div class="item">3</div>
 <div class="item">4</div>
 <div class="item">5</div>
 </div>

CSS:

.circle-container {
 position: relative;
 width: 200px;
 height: 200px;
 border: 1px solid black;
 border-radius: 50%;
 margin: 50px auto;
}

.item {
 position: absolute;
 width: 30px;
 height: 30px;
 border-radius: 50%;
 background-color: lightblue;
 text-align: center;
 line-height: 30px;
}

.circle-container .item:nth-child(1) {
 top: calc(50% + sin(calc(1 * 360deg / 5)) * 85px - 15px);
 left: calc(50% + cos(calc(1 * 360deg / 5)) * 85px - 15px);
}

.circle-container .item:nth-child(2) {
 top: calc(50% + sin(calc(2 * 360deg / 5)) * 85px - 15px);
 left: calc(50% + cos(calc(2 * 360deg / 5)) * 85px - 15px);
}

.circle-container .item:nth-child(3) {
 top: calc(50% + sin(calc(3 * 360deg / 5)) * 85px - 15px);
 left: calc(50% + cos(calc(3 * 360deg / 5)) * 85px - 15px);
}

.circle-container .item:nth-child(4) {
 top: calc(50% + sin(calc(4 * 360deg / 5)) * 85px - 15px);
 left: calc(50% + cos(calc(4 * 360deg / 5)) * 85px - 15px);
}

.circle-container .item:nth-child(5) {
 top: calc(50% + sin(calc(5 * 360deg / 5)) * 85px - 15px);
 left: calc(50% + cos(calc(5 * 360deg / 5)) * 85px - 15px);
}

இந்த எடுத்துக்காட்டில், ஒவ்வொரு `.item` உறுப்பின் நிலையை `sin()` மற்றும் `cos()` பயன்படுத்தி கணக்கிடுகிறோம். கோணம் 360 டிகிரியை உறுப்புகளின் எண்ணிக்கையால் (5) வகுத்து, அதை உறுப்பின் இன்டெக்ஸால் பெருக்குவதன் மூலம் தீர்மானிக்கப்படுகிறது. இதன் விளைவாக வரும் `sin()` மற்றும் `cos()` மதிப்புகள் பின்னர் `top` மற்றும் `left` நிலைகளைக் கணக்கிடப் பயன்படுத்தப்படுகின்றன, இது உறுப்புகளை ஒரு வட்ட அமைப்பில் திறம்பட வைக்கிறது. `85px` மதிப்பு வட்டத்தின் ஆரத்தைக் குறிக்கிறது, மற்றும் `15px` உறுப்பின் அளவுக்கான ஆஃப்செட் ஆகும்.

2. அலை போன்ற அனிமேஷன்களை உருவாக்குதல்

முக்கோணவியல் சார்புகள் மென்மையான, அலை போன்ற அனிமேஷன்களை உருவாக்க சிறந்தவை. காலப்போக்கில் ஒரு உறுப்பின் நிலை, ஒளிபுகாநிலை அல்லது பிற பண்புகளை மாற்றியமைக்க நீங்கள் `sin()` அல்லது `cos()` பயன்படுத்தலாம்.

HTML:

<div class="wave-container">
 <div class="wave-item"></div>
</div>

CSS:

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

.wave-item {
 position: absolute;
 width: 200%;
 height: 100%;
 background-color: lightblue;
 animation: wave 5s linear infinite;
}

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

இந்த எடுத்துக்காட்டில், `wave` அனிமேஷன் `.wave-item` உறுப்பின் செங்குத்து நிலையை (`translateY`) கணக்கிட `sin()` ஐப் பயன்படுத்துகிறது. அனிமேஷன் முன்னேறும்போது, சைன் மதிப்பு மாறுகிறது, இது ஒரு மென்மையான, நெளிவான அலை விளைவை உருவாக்குகிறது. `translateX` தொடர்ச்சியான அலை இயக்கத்தை உறுதி செய்கிறது.

3. ரெஸ்பான்சிவ் வளைவுகள் மற்றும் வளைவுகளை உருவாக்குதல்

CSS முக்கோணவியல் சார்புகளை வியூபோர்ட் அலகுகளுடன் (`vw` மற்றும் `vh` போன்றவை) இணைத்து வெவ்வேறு திரை அளவுகளுக்கு ஏற்றவாறு ரெஸ்பான்சிவ் வளைவுகள் மற்றும் வளைவுகளை உருவாக்கலாம்.

HTML:

<div class="arc-container">
 <div class="arc-element"></div>
</div>

CSS:

.arc-container {
 width: 100vw;
 height: 50vh;
 position: relative;
 overflow: hidden;
}

.arc-element {
 position: absolute;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background-color: red;
 left: calc(50vw + cos(var(--angle)) * 40vw - 10px);
 top: calc(50vh + sin(var(--angle)) * 20vh - 10px);
 animation: arc 5s linear infinite;
}

@keyframes arc {
 0% {
 --angle: 0deg;
 }
 100% {
 --angle: 360deg;
 }
}

இந்த எடுத்துக்காட்டில், `.arc-element`-ஐ ஒரு வளைவில் நிலைநிறுத்த தனிப்பயன் CSS பண்புகள் (`--angle`) மற்றும் முக்கோணவியல் சார்புகளைப் பயன்படுத்துகிறோம். `left` மற்றும் `top` பண்புகள் முறையே `cos()` மற்றும் `sin()` ஆகியவற்றின் அடிப்படையில் கணக்கிடப்படுகின்றன, `arc` அனிமேஷன் மூலம் கோணம் காலப்போக்கில் மாறுகிறது. வியூபோர்ட் அலகுகள் (`vw` மற்றும் `vh`) வளைவு திரை அளவிற்கு விகிதாசாரமாகப் பொருந்துவதை உறுதி செய்கின்றன.

4. `atan2()` மூலம் தூரங்களைக் கணக்கிடுதல்

`atan2()` இரண்டு புள்ளிகளுக்கு இடையேயான கோணத்தைத் தீர்மானிக்க முடியும், இது உறுப்புகள் ஒன்றின் நிலைக்கு மற்றொன்று வினைபுரியும் விளைவுகளை உருவாக்கப் பயன்படும்.

உங்களிடம் இரண்டு உறுப்புகள் இருக்கும் ஒரு சூழ்நிலையைக் கருத்தில் கொள்ளுங்கள், மேலும் ஒன்றை மற்றொன்றை நோக்கி எப்போதும் சுட்டிக்காட்டும் வகையில் சுழற்ற விரும்புகிறீர்கள்:

HTML:

<div class="container">
 <div class="target">Target</div>
 <div class="pointer">Pointer</div>
</div>

CSS (with JavaScript):

.container {
 position: relative;
 width: 300px;
 height: 300px;
 border: 1px solid black;
 margin: 50px auto;
}

.target {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 50px;
 height: 50px;
 background-color: lightcoral;
 text-align: center;
 line-height: 50px;
}

.pointer {
 position: absolute;
 top: 20%;
 left: 50%;
 transform: translateX(-50%);
 width: 80px;
 height: 20px;
 background-color: lightgreen;
 text-align: center;
 line-height: 20px;
 transform-origin: left center; /* Important for correct rotation */
}

JavaScript:

const target = document.querySelector('.target');
const pointer = document.querySelector('.pointer');
const container = document.querySelector('.container');

container.addEventListener('mousemove', (e) => {
 const containerRect = container.getBoundingClientRect();
 const targetRect = target.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;

 pointer.style.transform = `translateX(-50%) rotate(${angle}deg)`;
});

இந்த எடுத்துக்காட்டில், கண்டெய்னரைப் பொறுத்து மவுஸ் கோஆர்டினேட்களைப் பெற ஜாவாஸ்கிரிப்ட் பயன்படுத்தப்படுகிறது. `Math.atan2()` கண்டெய்னரின் மையம் (மூலமாக செயல்படுகிறது) மற்றும் மவுஸ் நிலைக்கு இடையேயான கோணத்தைக் கணக்கிடுகிறது. இந்த கோணம் பின்னர் `.pointer` உறுப்பைச் சுழற்றப் பயன்படுத்தப்படுகிறது, அது எப்போதும் மவுஸ் கர்சரை நோக்கிச் சுட்டிக்காட்டுவதை உறுதி செய்கிறது. `transform-origin: left center;` என்பது பாயிண்டர் அதன் இடது மையப் புள்ளியைச் சுற்றி சரியாகச் சுழலுவதை உறுதி செய்ய முக்கியமானது.

CSS-இல் முக்கோணவியல் சார்புகளைப் பயன்படுத்துவதன் நன்மைகள்

• டைனமிக் மற்றும் ரெஸ்பான்சிவ் வடிவமைப்புகள்: வெவ்வேறு திரை அளவுகள் மற்றும் ரெசல்யூஷன்களுக்கு கணித ரீதியாகத் தங்களை மாற்றியமைத்துக் கொள்ளும் லேஅவுட்களை உருவாக்குங்கள்.
• சிக்கலான அனிமேஷன்கள்: அலை போன்ற இயக்கங்கள் மற்றும் பிற சிக்கலான வடிவங்களுடன் மென்மையான, யதார்த்தமான அனிமேஷன்களை உருவாக்குங்கள்.
• கணிதத் துல்லியம்: முக்கோணவியல் கணக்கீடுகளின் அடிப்படையில் உறுப்புகளின் துல்லியமான நிலை மற்றும் அளவை அடையுங்கள்.
• குறைக்கப்பட்ட ஜாவாஸ்கிரிப்ட் சார்பு: கணக்கீடுகளை நேரடியாக CSS-இல் செய்யுங்கள், இது லேஅவுட் மற்றும் அனிமேஷனுக்கான சிக்கலான ஜாவாஸ்கிரிப்ட் குறியீட்டின் தேவையைக் குறைக்கிறது.
• மேம்படுத்தப்பட்ட செயல்திறன்: ஜாவாஸ்கிரிப்ட் அடிப்படையிலான மாற்றுகளை விட CSS-அடிப்படையிலான அனிமேஷன்கள் மற்றும் கணக்கீடுகள் அதிக செயல்திறன் கொண்டவையாக இருக்கும், குறிப்பாக எளிய மாற்றங்களுக்கு.

கருத்தில் கொள்ள வேண்டியவை மற்றும் சிறந்த நடைமுறைகள்

• உலாவி இணக்கத்தன்மை: நவீன உலாவிகளில் முக்கோணவியல் சார்புகள் நன்கு ஆதரிக்கப்பட்டாலும், இணக்கத்தன்மையைச் சரிபார்த்து பழைய உலாவிகளுக்கு ஃபால்பேக்குகளை வழங்குவது அவசியம். இணக்கத்தன்மையை மேம்படுத்த முக்கோணவியல் சார்புகளுக்கான செருகுநிரல்களுடன் PostCSS போன்ற ஒரு லைப்ரரியைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்.
• செயல்திறன்: சிக்கலான கணக்கீடுகள் செயல்திறனைப் பாதிக்கலாம், குறிப்பாக அதிக எண்ணிக்கையிலான உறுப்புகள் அல்லது அடிக்கடி புதுப்பித்தல்களுடன். உங்கள் குறியீட்டை மேம்படுத்தி, முடிந்தவரை வன்பொருள் முடுக்கத்தைப் பயன்படுத்தவும்.
• படிக்கக்கூடிய தன்மை: முக்கோணவியல் கணக்கீடுகள் CSS குறியீட்டை மிகவும் சிக்கலாக்கலாம். படிக்கக்கூடிய தன்மை மற்றும் பராமரிப்பை மேம்படுத்த கமெண்ட்கள் மற்றும் விளக்கமான மாறிப் பெயர்களைப் பயன்படுத்தவும்.
• சோதனை: நிலையான நடத்தை மற்றும் ரெஸ்பான்சிவ் தன்மையை உறுதிப்படுத்த உங்கள் வடிவமைப்புகளை வெவ்வேறு சாதனங்கள் மற்றும் உலாவிகளில் முழுமையாகச் சோதிக்கவும்.

முடிவுரை

CSS முக்கோணவியல் சார்புகள், டைனமிக், ரெஸ்பான்சிவ் மற்றும் கணித ரீதியாக துல்லியமான வலை வடிவமைப்புகளை உருவாக்க ஒரு சக்திவாய்ந்த கருவித்தொகுப்பை வழங்குகின்றன. இந்த சார்புகளைப் புரிந்துகொண்டு பயன்படுத்துவதன் மூலம், டெவலப்பர்கள் லேஅவுட், அனிமேஷன் மற்றும் ஊடாடும் உறுப்புகளுக்கான புதிய சாத்தியங்களைத் திறக்க முடியும், இது பயனர் அனுபவத்தை கணிசமாக மேம்படுத்துகிறது. வட்ட வடிவ லேஅவுட்கள் மற்றும் அலை போன்ற அனிமேஷன்கள் முதல் ரெஸ்பான்சிவ் வளைவுகள் மற்றும் உறுப்பு நிலைப்படுத்தல் வரை, பயன்பாடுகள் பரந்த மற்றும் மாறுபட்டவை. உலாவி இணக்கத்தன்மை, செயல்திறன் மற்றும் படிக்கக்கூடிய தன்மை ஆகியவற்றில் கவனமாகக் கருத்தில் கொள்வது அவசியமானாலும், உங்கள் CSS பணிப்பாய்வுகளில் முக்கோணவியல் சார்புகளை இணைப்பதன் நன்மைகள் மறுக்க முடியாதவை, இது உண்மையிலேயே ஈர்க்கக்கூடிய மற்றும் அதிநவீன வலை அனுபவங்களை உருவாக்க உங்களை அனுமதிக்கிறது. CSS தொடர்ந்து உருவாகும்போது, இந்த நுட்பங்களில் தேர்ச்சி பெறுவது உலகெங்கிலும் உள்ள வலை வடிவமைப்பாளர்கள் மற்றும் டெவலப்பர்களுக்கு பெருகிய முறையில் மதிப்புமிக்கதாக மாறும்.

இந்த அறிவு மிகவும் சிக்கலான மற்றும் பார்வைக்கு ஈர்க்கக்கூடிய வடிவமைப்புகளை அனுமதிக்கிறது. உங்கள் வலை மேம்பாட்டுத் திட்டங்களில் CSS முக்கோணவியல் சார்புகளின் முழுத் திறனையும் திறக்க இந்த நுட்பங்களை ஆராய்ந்து வெவ்வேறு அளவுருக்களுடன் பரிசோதனை செய்யுங்கள்.