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

[erfan]

سلام

تو این آموزش به 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]

کاربردی هست این کد ها و بسیار لازم میشه. از شر javascript هم راحت میشیم