سلام
تو این آموزش به 2D کردن در CSS3 پرداخته میشه.مثلا یاد میگیرید که چطور عناصر در صفحه HTML خودتون رو بچرخونید،بکشید و...
پشتیبانی از مرورگر ها:
-اینترنت اکسپورر احتیاج به اضافه کردن -ms-
-کروم و سافاری نیاز به پیشوند -webkit-
-فایرفکس نیاز به اضافه کردن -moz-
-اپرا نیاز به پیشوند -o-
شروع با HTML:
جهت شروع باید اشنایی با HTML داشته باشید.
ابتدا در کد HTML خود یک دیو (div) ایجاد کنید.
سپس به CSS برید و دیوتون رو صدا بزنید.
چرخش متد:
این عنصر در جهت چرخش عقربه های ساعت می چرخد:
روش مورب:
این عنصر تبدیل به یک زاویه معین، با توجه به پارامترهای داده شده.
روش ماتریس:
روش ماتریس ترکیبی از همه روش های css 2D است.
روش ماتریس شش پارامتر، توابع ریاضی است که اجازه می دهد شما به چرخش،مقیاس،حرکت و... بپردازید.
:53: :53:
تو این آموزش به 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 */
}