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

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

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

CSS இல் செயல்படுத்துவதற்கு முன், முக்கோணவியல் செயல்பாடுகளின் அடிப்படைகளை மீண்டும் பார்ப்போம். கணிதத்தில், இந்த செயல்பாடுகள் ஒரு செங்கோண முக்கோணத்தின் கோணங்களையும் பக்கங்களையும் தொடர்புபடுத்துகின்றன.

• கொசைன் (cos): அடுத்துள்ள பக்கத்திற்கும் கர்ணத்திற்கும் உள்ள விகிதம்.
• சைன் (sin): எதிர்ப் பக்கத்திற்கும் கர்ணத்திற்கும் உள்ள விகிதம்.
• டாஞ்சன்ட் (tan): எதிர்ப் பக்கத்திற்கும் அடுத்துள்ள பக்கத்திற்கும் உள்ள விகிதம்.

CSS இல், இந்த செயல்பாடுகள் ஒரு கோணத்தை உள்ளீடாக ஏற்றுக்கொண்டு (டிகிரி, ரேடியன், டர்ன் அல்லது கிரேடுகளில் வெளிப்படுத்தப்படுகிறது) மற்றும் -1 முதல் 1 வரையிலான மதிப்பை (cos() மற்றும் sin() க்கு) அல்லது எந்தவொரு மெய்யெண்ணையும் (tan() க்கு) வழங்குகின்றன. இந்த மதிப்பை transform, width, height, left, top போன்ற CSS பண்புகளில் பயன்படுத்தலாம்.

உலாவி இணக்கத்தன்மை

முக்கோணவியல் செயல்பாடுகள் CSS க்கு ஒப்பீட்டளவில் புதியவை, மேலும் உலாவி ஆதரவு இன்னும் வளர்ந்து வருகிறது. 2023 இன் பிற்பகுதி / 2024 இன் முற்பகுதியில், Chrome, Firefox, Safari மற்றும் Edge உள்ளிட்ட பெரும்பாலான நவீன உலாவிகளில் ஆதரவு கிடைக்கிறது. உற்பத்தியில் இந்த செயல்பாடுகளை செயல்படுத்துவதற்கு முன் Can I use போன்ற வலைத்தளங்களில் சமீபத்திய இணக்கத்தன்மை அட்டவணைகளைச் சரிபார்ப்பது மிகவும் முக்கியம். பழைய உலாவிகளுக்கு ஒரு பாலிஃபில் அல்லது பின்னடைவைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்.

அடிப்படை தொடரியல்

CSS இல் முக்கோணவியல் செயல்பாடுகளைப் பயன்படுத்துவதற்கான தொடரியல் நேரடியானது:

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;
}

/* சிறந்த கட்டுப்பாட்டிற்கு CSS மாறிகளைப் பயன்படுத்துதல் */
: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 உள்ளது.
• பொருட்களின் எண்ணிக்கை மற்றும் வட்டத்தின் ஆரத்தைக் கட்டுப்படுத்த CSS மாறிகளை (--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() மதிப்புகளைக் கணக்கிடவும் JavaScript ஐப் பயன்படுத்த வேண்டும்.

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 வியூபோர்ட் அகலத்தின் அடிப்படையில் ஆரத்தை மாறும் வகையில் கணக்கிடுகிறது, குறைந்தபட்ச மற்றும் அதிகபட்ச ஆரத்திற்கு இடையில் ஒரு நேரியல் இடைச்செருகலைப் பயன்படுத்துகிறது.
• மாற்றங்களைக் காண சாளரத்தை அளவை மாற்றவும்

மீடியா வினவல்கள்: குறிப்பிட்ட பிரேக் பாயிண்ட்களின் அடிப்படையில் CSS மாறிகளின் மதிப்புகளை சரிசெய்ய மீடியா வினவல்களைப் பயன்படுத்தி ரெஸ்பான்சிவ் நடத்தையை மேலும் செம்மைப்படுத்தலாம்.

குறிப்புகள் மற்றும் சிறந்த நடைமுறைகள்

• CSS மாறிகளைப் பயன்படுத்தவும்: CSS மாறிகள் (தனிப்பயன் பண்புகள்) முக்கோணவியல் செயல்பாடுகளில் பயன்படுத்தப்படும் மதிப்புகளை நிர்வகிக்கவும் புதுப்பிக்கவும் எளிதாக்குகின்றன. இது குறியீட்டின் வாசிப்புத்திறன் மற்றும் பராமரிப்பினை மேம்படுத்துகிறது.
• செயல்திறனுக்காக மேம்படுத்தவும்: முக்கோணவியல் செயல்பாடுகளை உள்ளடக்கிய சிக்கலான அனிமேஷன்கள் கணக்கீட்டு ரீதியாக தீவிரமானவை. கணக்கீடுகளின் எண்ணிக்கையைக் குறைப்பதன் மூலமும், முடிந்தவரை வன்பொருள் முடுக்கத்தைப் பயன்படுத்துவதன் மூலமும் (எ.கா., transform: translateZ(0) ஐப் பயன்படுத்துதல்) உங்கள் குறியீட்டை மேம்படுத்தவும்.
• பின்னடைவுகளை வழங்கவும்: மாறுபட்ட உலாவி ஆதரவு காரணமாக, முக்கோணவியல் செயல்பாடுகள் ஆதரிக்கப்படாத பழைய உலாவிகள் அல்லது சூழல்களுக்கு பின்னடைவு வழிமுறைகளை வழங்கவும். இது எளிமையான CSS நுட்பங்களைப் பயன்படுத்துவது அல்லது காட்சி விளைவின் மென்மையான சிதைவை வழங்குவதை உள்ளடக்கலாம்.
• அணுகல்தன்மையை கருத்தில் கொள்ளுங்கள்: உங்கள் வடிவமைப்புகள் மாற்றுத்திறனாளிகள் உட்பட அனைத்து பயனர்களுக்கும் அணுகக்கூடியதாக இருப்பதை உறுதிசெய்யவும். எல்லோராலும் உணர முடியாத காட்சி விளைவுகளை மட்டுமே நம்புவதைத் தவிர்க்கவும். தகவல் மற்றும் செயல்பாட்டை அணுக மாற்று வழிகளை வழங்கவும்.
• முழுமையாக சோதிக்கவும்: சீரான நடத்தை மற்றும் நேர்மறையான பயனர் அனுபவத்தை உறுதிசெய்ய வெவ்வேறு உலாவிகள், சாதனங்கள் மற்றும் திரை அளவுகளில் உங்கள் வடிவமைப்புகளைச் சோதிக்கவும்.

CSS அமைப்பின் எதிர்காலம்

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

முடிவுரை

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

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

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