ورود به اکانت شما

نام کاربری *
رمز عبور *
مرا بخاطر بسپار

ایجاد حساب کاربری

فیلد های ستاره دار را پر کنید.
نام *
نام کاربری *
رمز عبور *
تکرار رمز عبور *
ایمیل *
تکرار ایمیل *
کپچا *
بارگذاری کپچا

تبدیل سه بعدی در Css3 مطلب ویژه

توسط 07 خرداد, 1392 5731 0

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

css3-3dtransforms

یکی از قابلیت های فوق العاده ای که به Css3 اضافه شده است ، ساخت المنت  با جلوه سه بعدی می باشد .
با استفاده از ویژگی 3D Transforms در Css3 می توانیم به المنت های خود جلوه سه بعدی اضافه کنیم .
ویژگی 3D Transforms دارای دو متد زیر مجموعه می باشد .
rotateX()
rotateY()
تمام مرورگرها به غیر از اوپرا از این ویژگی پشتیبانی می کنند اما در نسخه های جدید .
اینترنت اکسپلورر نسخه 10 , فایرفاکس , موزیلا و سافاری از این ویژگی پشتیبانی می کنند  .
کروم و سافاری برای این ویژگی نیاز به پیشوند -webkit- دارند .
اوپرا از این ویژگی پشتیبانی نمی کند . 



متد rotate X در Css3
با متد rotate X المنت با گرفتن درجه (deg)  حول محور X می چرخد . 

div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */
}

 

 

3d-transform-1

 کد اصلی قسمت بالا . (در یک فایل نوت پد کپی کرده و با فرمت html.ذخیره کنید) 


<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>Untitled Document</title>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:rotateX(120deg);
-webkit-transform:rotateX(120deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer 9 (and earlier versions) and Opera does not support the rotateX method.</p>
<div>Hello. This is a DIV element.</div>
<div id='div2'>Hello. This is a DIV element.</div>
</body>
</html>

 

 

3d-transform-2

متد rotate Y در Css3
با متد rotate Y المنت با گرفتن درجه (deg)  حول محور Y می چرخد .


div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari and Chrome */
}

 

 

3d-transform-3 

کد اصلی قسمت بالا . (در یک فایل نوت پد کپی کرده و با فرمت html.ذخیره کنید)


<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>Untitled Document</title>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:rotateY(130deg);
-webkit-transform:rotateY(130deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer 9 (and earlier versions) and Opera does not support the rotateY method.</p>
<div>Hello. This is a DIV element.</div>
<div id='div2'>Hello. This is a DIV element.</div>
</body>
</html>

3d-transform-4

این مورد را ارزیابی کنید
(1 رای)
آخرین ویرایش در پنج شنبه, 31 ارديبهشت 1394 ساعت 22:49
کلیه حقوق متعلق است به فروشگاه آسارایان. طراحی و پشتیبانی: webriz
تک وب دیزاین-قالب فارسی جوملا