تبدیل سه بعدی در Css3

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

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

آخرین بروز رسانیپنج شنبه, 31 ارديبهشت 1394 22:49

نوشتن دیدگاه

تصویر امنیتی
تصویر امنیتی جدید

دیدگاه‌ها   

0 #3 Guest 1394-04-30 13:31
هم از فایر فاکس.هم از کروم.(کروم ورژن بالاست)
نقل قول کردن
0 #2 Guest 1394-04-30 09:59
به نقل از Guest:
سلام خسته نباشید
ببخشید من از transform-rotateyبا perspectiveاستفاده کردم ولی هی چند باری که میرم روش حالتش بهم میخوره.بعنی در واقع از قاب خودش بیرون میزنه از,ویژگیpositoino:relative,posistion-absoluteهم استفاده کردم ولی بازم مشکل داره.

سلام
از چه مرورگری استفاده می کنید ؟
نقل قول کردن
0 #1 Guest 1394-04-29 23:33
سلام خسته نباشید
ببخشید من از transform-rotat eyبا perspectiveاستف اده کردم ولی هی چند باری که میرم روش حالتش بهم میخوره.بعنی در واقع از قاب خودش بیرون میزنه از,ویژگیpositoi no:relative,pos istion-absolute هم استفاده کردم ولی بازم مشکل داره.
نقل قول کردن

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا