چرخش حول محور xyz و کار با دستور perspective در css

در درس قبل درباره تغییر شکل دوبعدی عناصر در CSS صحبت کردیم و هر آنچه در این زمینه لازم بود، شرح دادیم. امروز با مبحث تغییر شکل سه بعدی عناصر با شما عزیزان هستیم.

تغییر شکل سه بعدی عناصر

زبان CSS به شما اجازه می دهد که با استفاده از قابلیت transformation اشیاء مورد نظرتان را به شکل 3 بعدی تغییر دهید.

وضعیت پشتیبانی از این قابلیت در جدول زیر آمده است. توجه داشته باشید که اعداد این جدول نخستین نسخه ای از آن است که از قابلیت transform پشتیبانی کامل می کند و اعدادی که همراه پسوند هایی مانند -ms- و -webkit- و ... هستند نشان دهنده ی اولین نسخه ای از مرورگر هستند که فقط با آن پسوند کار می کند:

خصوصیت	کروم	edge	فایرفاکس	سافاری	اپرا
transform	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	9.0 4.0 -webkit-	23.0 15.0 -webkit-
transform-origin (حالتی که سه مقدار می گیرد)	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	9.0 4.0 -webkit-	23.0 15.0 -webkit-
transform-style	36.0 12.0 -webkit-	11.0	16.0 10.0 -moz-	9.0 4.0 -webkit-	23.0 15.0 -webkit-
perspective	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	9.0 4.0 -webkit-	23.0 15.0 -webkit-
perspective-origin	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	9.0 4.0 -webkit-	23.0 15.0 -webkit-
backface-visibility	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	9.0 4.0 -webkit-	23.0 15.0 -webkit-

متد ()rotateX

این متد عنصر مورد نظر ما را روی محور X میچرخاند. به این مثال دقت کنید:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

#myDiv {
  -webkit-transform: rotateX(150deg); /* Safari */
  transform: rotateX(150deg); /* Standard syntax */
}
</style>
</head>
<body>

<h1>The rotateX() Method</h1>
<p>The rotateX() method rotates an element around its X-axis at a given degree.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated 150 degrees.
</div>

<p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateX() method.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

هشدار: این قابلیت (یعنی rotateX) در Internet Explorer 9 و نسخه های قبل تر آن پشتیبانی نمی شود.

متد ()rotateY

این متد، عنصر مورد نظر ما را روی محور Y می چرخاند. به این مثال دقت کنید:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

#myDiv {
  -webkit-transform: rotateY(150deg); /* Safari */
  transform: rotateY(150deg); /* Standard syntax */
}
</style>
</head>
<body>

<h1>The rotateY() Method</h1>
<p>The rotateY() method rotates an element around its Y-axis at a given degree.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated 150 degrees.
</div>

<p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateY() method.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

متد ()rotateZ

این متد، عنصر مورد نظر ما را در محور Z میچرخاند. کد زیر مثال خوبی از این چرخش است:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

#myDiv {
  -webkit-transform: rotateZ(90deg); /* Safari */
  transform: rotateZ(90deg); /* Standard syntax */
}
</style>
</head>
<body>

<h1>The rotateZ() Method</h1>
<p>The rotateZ() method rotates an element around its Z-axis at a given degree.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated 90 degrees.
</div>

<p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateZ() method.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

هشدار: این قابلیت در Internet Explorer 9 و نسخه های قبل تر آن پشتیبانی نمی شود.

دستور perspective در css

این دستور (یعنی perspective) در لغت به معنی «زاویه دید» یا همان پرسپکتیو در فارسی است و همانطور که حدس میزنید،

perspective در css مسئول تعیین زاویه دید است. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
  position: relative;
  height: 150px;
  width: 150px;
  margin-left: 60px;
  border: 1px solid blue;
  -webkit-perspective: 100px; /* Safari 4-8  */
  perspective: 100px;
}

#div2, #div4 {
  padding: 50px;
  position: absolute;
  border: 1px solid black;
  background-color: red;
  background: rgba(100,100,100,0.5); 
  -webkit-transform-style: preserve-3d; /* Safari 3-8  */  
  -webkit-transform: rotateX(45deg); /* Safari 3-8  */
  transform-style: preserve-3d;
  transform: rotateX(45deg);
}

#div3 {
  position: relative;
  height: 150px;
  width: 150px;
  margin-left: 60px;
  border: 1px solid blue;
  -webkit-perspective: none; /* Safari 4-8  */
  perspective: none;
</style>
</head>
<body>

<h1>The perspective Property</h1>

<h2>perspective: 100px:</h2>
<div id="div1">DIV1
  <div id="div2">DIV2</div>
</div>

<h2>perspective: none:</h2>
<div id="div3">DIV3
  <div id="div4">DIV4</div>
</div>

<p><strong>Note:</strong> The perspective property is not supported in IE9 and earlier versions.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

در مثال بالا به Div2 و Div1 دستور زاویه دید داده ایم و همانطور که می بینید حالت پرسپکتیو در آن ها ایجاد شده است اما در Div3 و Div4 هیچ تغییری نمی بینیم. البته این قابلیت نیز در IE9 و نسخه های قبلی آن پشتیبانی نمی شود. البته توجه داشته باشید که هنگام کار با perspective این عنصر فرزند است که افکت پرسپکتیو را دریافت می کند و نه خود آن عنصر.

اگر دوست دارید به صورت دستی و خودتان تعیین کنید که زاویه ی دید از چه منطقه ای باشد باید از دستور perspective-origin استفاده کنید:

<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
  position: relative;
  height: 150px;
  width: 150px;
  margin-left: 60px;
  border: 1px solid blue;
  -webkit-perspective: 100px; /* Safari 4-8  */
  -webkit-perspective-origin: left; /* Safari 4-8  */  
  perspective: 100px;
  perspective-origin: left;  
}

#div2, #div4, #div6 {
  padding: 50px;
  position: absolute;
  border: 1px solid black;
  background-color: red;
  background: rgba(100,100,100,0.5); 
  -webkit-transform-style: preserve-3d; /* Safari 3-8  */  
  -webkit-transform: rotateX(45deg); /* Safari 3-8  */
  transform-style: preserve-3d;
  transform: rotateX(45deg);
}

#div3 {
  position: relative;
  height: 150px;
  width: 150px;
  margin-left: 60px;
  border: 1px solid blue;
  -webkit-perspective: 100px; /* Safari 4-8  */
  -webkit-perspective-origin: bottom right; /* Safari 4-8  */    
  perspective: 100px;
  perspective-origin: bottom right;
}

#div5 {
  position: relative;
  height: 150px;
  width: 150px;
  margin-left: 60px;
  border: 1px solid blue;
  -webkit-perspective: 100px; /* Safari 4-8  */
  -webkit-perspective-origin: -90%; /* Safari 4-8  */    
  perspective: 100px;
  perspective-origin: -90%;
}
</style>
</head>
<body>

<h1>The perspective-origin Property</h1>

<h2>perspective-origin: left:</h2>
<div id="div1">DIV1
  <div id="div2">DIV2</div>
</div>

<h2>perspective-origin: bottom right:</h2>
<div id="div3">DIV3
  <div id="div4">DIV4</div>
</div>

<h2>perspective-origin: -90%:</h2>
<div id="div5">DIV5
  <div id="div6">DIV6</div>
</div>

<p><strong>Note:</strong> The perspective-origin property is not supported in Internet Explorer 9 and earlier versions.</p> 

</body>
</html>

مشاهده ی خروجی در JSBin

دستور backface-visibility در css

دستور backface-visibility مشخص می کند که هنگام چرخش یک عنصر آیا اشکال یا نوشته های پشت آن برای کاربر قابل مشاهده باشد یا خیر. برای اینکه متوجه این مفهوم شوید، به مثال زیر نگاه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
div#div1 {
  -webkit-backface-visibility: visible;  /* Chrome, Safari, Opera */
  backface-visibility: visible;
}

div#div1 {
  width:100px;
  height:100px;
  background:red;
  position:relative;
  border:1px solid #000000;
  -webkit-animation:mymove 3s infinite;  /* Chrome, Safari, Opera */
  animation:mymove 3s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
  from {-webkit-transform: rotateY(0deg);}
  to {-webkit-transform: rotateY(360deg);}
}

@keyframes mymove {
  from {transform: rotateY(0deg);}
  to {transform: rotateY(360deg);}
}
</style>
<script>
function checkBackface() {
  if (document.getElementById("bf").checked == true) {
    document.getElementById('div1').style.backfaceVisibility = "hidden";
    document.getElementById('div1').style.webkitBackfaceVisibility = "hidden";
  } else {
    document.getElementById('div1').style.backfaceVisibility = "visible";
    document.getElementById('div1').style.webkitBackfaceVisibility = "visible";
  }
}
</script>
</head>
<body>

<div id="div1">HELLO</div>
<p dir='rtl'>با تیک زدن مربع پایین متوجه تفاوت وجود و عدم وجود این قابلیت خواهید شد:</p>
<p dir='rtl'>قسمت پشتی را پنهان کن:<input id="bf" type="checkbox" onchange="checkBackface()"></p>
<p dir='rtl'><strong>هشدار:</strong> این قابلیت در Internet Explorer 9 و نسخه های قبلی آن پشتیبانی نمی شوند.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

اگر به زبان ساده بگوییم، در هنگام استفاده می توانید به این شکل عمل کنید:

#div1 {
  backface-visibility: hidden;
}

#div2 {
  backface-visibility: visible;
}

تغییر شکل سه بعدی عناصر در CSS

تغییر شکل سه بعدی عناصر

متد ()rotateX

متد ()rotateY

متد ()rotateZ

دستور perspective در css

دستور backface-visibility در css