12
تشکر

مقدمه ای بر عناصر سه بعدی در CSS3 – بخش دوم

CSS3 - سی اس اس 3

CSS3 – سی اس اس 3

در مطلب اول این سری از مباحث در مورد perspective و perspective-origin صحبت کردیم. اما در این مطلب به توابع 3D transform خواهیم پرداخت. احتمالا شما با توابع rotateX یا rotateY آشنا هستید که به عنوان توابع 2D transform شناخته میشوند و در محیط دو بعدی کاربرد دارند. در این مطلب در مورد توابع سه بعدی بیشتر صحبت خواهیم کرد.

در ادامه همراه ما باشید…

تمام توابع دوبعدی را در اینجا و توابع سه بعدی را در اینجا میتوانید ببینید.

<br />
rotateX( angle )<br />
rotateY( angle )<br />
rotateZ( angle )<br />
translateZ( tz )<br />
scaleZ( sz )<br />

توابع rotate برای چرخش عناصر کاربرد دارند و توابع translate برای جا به جایی عنصر از محل فعلی استفاده میشود. برای مثال برای ساختن یک مکعب ما ضلع های مکعب را توسط تابع translate از مرکز دور کرده و به آنها rotate کافی میدهیم سپس ضلع ها در جای مناسب خود قرار میگیرند.

توابع scale هم برای تغییر سایز عنصر کاربرد دارند.

برای مثال در کد زیر ما میخواهیم دایو با کلاس panel را چرخش مناسب بدهیم.

</p>
<div class="container">
<div class="panel">rotateY( 45deg )</div>
</div>
<p>

خب ابتدا همانطور که در مطلب پیشین به آن اشاره کردیم باید perspective را به والد اضافه کنیم.

<br />
.container {<br />
  width: 200px;<br />
  height: 200px;<br />
  -webkit-perspective: 600px;<br />
  -moz-perspective: 600px;<br />
  -o-perspective: 600px;<br />
  perspective: 600px;<br />
}<br />

سپس مانند کد زیر میتوانیم از تمام توایع سه بعدی اضافه کنیم:

<br />
#rotate-y .panel {<br />
  -webkit-transform: rotateY( 45deg );<br />
  -moz-transform: rotateY( 45deg );<br />
  -o-transform: rotateY( 45deg );<br />
  transform: rotateY( 45deg );<br />
}<br />
3D transform

3D transform

مشاهده مثال در استفاده از توابع سه بعدی

همچنین شما میتوانید از توابع foo3d هم استفاده کنید. در این توابع میتوانید سه مقدار x,y,z را درون یک تابع جای دهید. Dean Jackson یکی از اعضای توسعه دهنده Webkit میگوید استفاده از توابع foo3d باعث افزایش راندمان رندرسازی میشود.

<br />
translate3d( tx, ty, tz )<br />
scale3d( sx, sy, sz )<br />
rotate3d( rx, ry, rz, angle )<br />

در این مطلب در مورد نحوه استفاده از توابع 3D صحبت کردیم، تا انتشار مطلب بعدی بهتر است با این توابع کار کنید، تا آمادگی بیشتری داشته باشید.

این مطلب از سری مطالب، 3D Transform است

نظرات این مطلب بسته است.