آموزش 2d کردن در css3 (چرخش و کشش عناصر)

  • شروع کننده موضوع erfan
  • تاریخ شروع

erfan

طراح وب
26/10/12
674
0
16
سلام

تو این آموزش به 2D کردن در CSS3 پرداخته میشه.مثلا یاد میگیرید که چطور عناصر در صفحه HTML خودتون رو بچرخونید،بکشید و...

پشتیبانی از مرورگر ها:

-اینترنت اکسپورر احتیاج به اضافه کردن -ms-

-کروم و سافاری نیاز به پیشوند -webkit-

-فایرفکس نیاز به اضافه کردن -moz-

-اپرا نیاز به پیشوند -o-

شروع با HTML:

جهت شروع باید اشنایی با HTML داشته باشید.

ابتدا در کد HTML خود یک دیو (div) ایجاد کنید.

سپس به CSS برید و دیوتون رو صدا بزنید.

چرخش متد:



این عنصر در جهت چرخش عقربه های ساعت می چرخد:


کد:
div
	{
	transform: rotate(30deg);
	-ms-transform: rotate(30deg); /* IE 9 */
	-webkit-transform: rotate(30deg); /* Safari and Chrome */
	-o-transform: rotate(30deg); /* Opera */
	-moz-transform: rotate(30deg); /* Firefox */
	}
روش مورب:



این عنصر تبدیل به یک زاویه معین، با توجه به پارامترهای داده شده.


کد:
div
	{
	transform: skew(30deg,20deg);
	-ms-transform: skew(30deg,20deg); /* IE 9 */
	-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
	-o-transform: skew(30deg,20deg); /* Opera */
	-moz-transform: skew(30deg,20deg); /* Firefox */
	}
روش ماتریس:



روش ماتریس ترکیبی از همه روش های css 2D است.

روش ماتریس شش پارامتر، توابع ریاضی است که اجازه می دهد شما به چرخش،مقیاس،حرکت و... بپردازید.


کد:
div
	{
	transform:matrix(0.866,0.5,-0.5,0.866,0,0);
	-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
	-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
	-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
	-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
	}
:53: :53:

 

Mohammad

مدیر انجمن
عضو کادر مدیریت
6/4/08
15,091
122
63
30
PersianScript
کاربردی هست این کد ها و بسیار لازم میشه. از شر javascript هم راحت میشیم :D