واگذاری مالیک دامنه
، محتوا و سورس
وب سایت
لیداوب
   در حال بارگزاری ...

آموزش Transitions و Transformations در css

CSS
توسط سميه شفيعي
آخرین به روز رسانی پنجشنبه 14 فروردین 1399

بدون نیاز به گرافیک‌ها و جاوا اسکریپت و با استفاده از CSS می‌توان بسیاری از جلوه‌های بصری زیبا را در صفحات وب شما به طور کامل ایجاد کرد. در این آموزش نگاهی خواهیم داشت به قابلیت‌های انیمیشن در CSS3 برای ساختن افکت‌هایی که در گذشته فقط با فناوری‌هایی مانند Flash امکان پذیر بود. در این قسمت ما به آموزش CSS Transitions و CSS Transformations خواهیم پرداخت.

آموزش Transitions و Transformations در css

آموزش Transitions در CSS

ما این مقاله را با CSS Transitions شروع می‌کنیم، CSS Transitions ایجاد تغییر در یک استایل را آسان می‌کند. در ادامه نیز نگاهی خواهیم داشت به Transforms. CSS Transforms می‌تواند کارهایی مانند انحراف (skew)، چرخش (rotate)، مقیاس (scale) و عناصر موقعیت (position elements) را انجام دهد. هنگام ترکیب Transitions و  Transforms، ساخت برخی از افکت‌های جالب انیمیشن امکان پذیر است.

انتقال در Transitions In CSS3) CSS3)

افکتی که Transitions ارائه می‌دهد، بسیار شبیه به آنچه با جی‌ کوئری می‌بینید است. به عنوان مثال، اگر ماوس را روی یک لینک خاص در یک صفحه وب قرار دهید، رنگ پس زمینه به تدریج از آبی به سبز تغییر می‌کند و در عین حال بسیار یک‌ دست با سایه‌های مختلف در طول تغییر ظاهر می‌شود که می‌توان این کار را  با CSS Transition انجام داد. همچنین، Transitions تغییراتی ایجاد می‌کند که می‌تواند با روشی متفاوت، بسیار سریع و ناگهانی و یک دست و صاف ظاهر شود. در صورت استفاده از روش اول، transitions می‌تواند یک ظاهر خوب به صفحات وب اضافه کند.

خصوصیت Transition و مدت زمان انتقال

بیایید مثالی از استفاده از خصوصیاتtransition-property  و   transition-duration   را مشاهده کنیم. خصوصیت transition-property  نام خصوصیت CSS را که می‌خواهید انتقال دهید یا یک افکت به آن اضافه کنید را می‌گیرد. در مثال زیر، ما انتقال را به خصوصیت background-color   اضافه می‌کنیم.

خصوصیت transition-duration   تعریف می‌کند چه مدت طول خواهد کشید تا انتقال کامل شود. در مثال زیر، این مورد را روی 1 ثانیه تنظیم می‌کنیم.

a.transition1 {

    display: block;

    text-decoration: none;

    text-align: center;

    padding: 1em;

    margin: auto;

    width: 20em;

    border-radius: 2em;

    background-color: blue;

    color: #fff;

    transition-property: background-color;

    transition-duration: 1s;

}



a.transition1:hover, a.transition1:focus {

    background-color: green;

}

برای دیدن انتقال رنگ پس زمینه ( background-color  ) در عمل، روی عنصر Super حرکت کنید.

Super!

 

توابع زمان بندی انتقال (Transition Timing Functions)

هنگامی که خصوصیات transition-property  و  transition-duration   را برای استفاده در یک عنصر اعمال کردید، می‌توانید با استفاده از خصوصیت transition-timing-function   ، رفتار انتقال را  سفارشی‌ سازی کنید یا به عبارتی رفتار انتقال را با استفاده از این خصوصیت تنظیم کنید. این خصوصیت برای تعریف نحوه محاسبه مقادیر میانی خصوصیات CSS در حال انتقال استفاده می‌شود. مقادیری که خصوصیت transition-timing-function  می‌پذیرد به شرح زیر است.

  • Ease : افکت انتقال را اعمال می‌کند که به آرامی شروع می‌شود، سرعت می‌یابد، سپس به آرامی پایان می‌یابد. این مقدار پیش‌فرض است.
  • ease-out : یک افکت انتقال را اعمال می‌کند که دارای یک پایان آرام است.
  • ease-in-out : یک افکت انتقال را اعمال می‌کند که دارای یک شروع کند و پایان آهسته است.
  • Linear : از ابتدا تا انتها دارای یک افکت مداوم (consistent) است. 
  • ease-in : ابتدا به آرامی شروع می‌شود، سپس سرعت می‌یابد.
  • Steps : این مقدار انتقال را به تعداد مشخصی از مراحل تقسیم می‌کند.
  • step-start : حالت را در یک مرحله بزرگ و درست در ابتدای تایمر مدت زمان، تغییر می‌دهد.
  • step-end : حالت را در یک مرحله و درست در پایان تایمر مدت زمان تغییر می‌دهد.

ما می‌توانیم این مقادیر مختلف را در عمل مشاهده کنیم. ما هشت جعبه مختلف داریم و هر یک از آن‌ها مقدار متفاوتی را برای خصوصیت transition-timing-function   می‌گیرند:

p.timing-functions {

    text-align: center;

    line-height: 30px;

    background-color: #fff;

    border: 4px solid lightblue;

    margin: 1em auto 1em auto;

    width: 120px;

    padding: 10px 10px;

    font-weight: normal;

    transition-property: width;

    transition-duration: 3s;

    transition-timing-function: ease;

}



#transition-timing-functions:hover .timing-functions {

    width: 570px;

}

برای دیدن انتقال عرض (width transition) با مقادیر مختلف عملکرد زمان بندی انتقال ( transition-timing-function  )، در عمل روی کانتینر حرکت کنید.

step-start

ease

ease-out

ease-in-out

linear

ease-in

steps(3,end)

step-end

افزودن خصوصیات انتقال بیشتر

شما می‌توانید بیش از یک خصوصیت CSS را به عنوان یک مقدار به خصوصیت transition-property  اضافه کنید که به شما امکان می‌دهد انیمیشن‌های پیشرفته‌تری ایجاد کنید. به عنوان مثال، ما می‌خواهیم لینک اولیه خود را که از آبی به سبز تغییر یافته است را بگیریم، می‌توانیم خصوصیت border-radius    را به انتقال خود اضافه کنیم.

در قطعه کدزیر، شما می‌توانید ببینید که اکنون دومین خصوصیت CSS به transition-property اضافه شده است. توجه داشته باشید که transition-duration  اکنون دارای دو مقدار زمان است. این به این معنی است که شما می‌توانید مدت زمان لازم برای هر انتقال را به صورت مستقل تغییر دهید. در مثال ما، انتقال رنگ پس زمینه ( background-color ) در یک ثانیه اتفاق می‌افتد و انتقال شعاع مرزی ( border-radius ) در سه ثانیه اتفاق می‌افتد.

a.transition2 {
    margin: auto;
    display: block;
    text-decoration: none;
    text-align: center;
    padding: 1em;
    width: 20em;
    border-radius: 2em;
    background-color: blue;
    color: #fff;
    transition-property: background-color, border-radius;
    transition-duration: 1s, 3s;
}

a.transition2:hover, a.transition2:focus {
    background-color: green;
    border-radius: 0;
}

برای دیدن انتقال رنگ پس زمینه و انتقال شعاع مرزی در عمل، روی عنصر Super حرکت کنید.

Super!

حالا بیایید این ایده را کمی بیشتر انجام دهیم. برای تبدیل یک مربع به یک دایره، می‌توانیم از انتقال شعاع مرزی ( border-radius ) استفاده کنیم. از این گذشته، ما یک انتقال را به فاصله بین حروف (letter-spacing) و رنگ فونت نیز اعمال خواهیم کرد. ما می‌توانیم با استفاده از Flexbox یک مربع عالی با یک مرکز افقی و عمودی ایجاد کنیم، سپس انتقال خود را اضافه می‌کنیم.

p.square-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
    background-color: #fff;
    border: 10px solid lightblue;
    margin: 1em auto 1em auto;
    width: 300px;
    padding: 15px 15px;
    font-weight: bold;
    transition-property: border-radius, letter-spacing, color;
    transition-duration: 1s;
}

.square-circle:hover {
    border-radius: 50%;
    letter-spacing: 10px;
    color: blue;
}

در مثال زیر روی مربع حرکت کنید تا آن را به یک دایره تغییر دهید.

Circleify


شاید ترجیح دهید دایره را به شکل یک مربع ببینید. برای این کار کافیست تنظیم شعاع مرزی را از ۵۰٪ شروع کرده (  border-radius: 50%; ) و سپس بدون شعاع مرزی انتقال دهید. برای تبدیل آن به یک مربع، روی دایره حرکت کنید.

p.circle-square {
    display: flex;
    height: 300px;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border: 10px solid lightblue;
    margin: 1em auto 1em auto;
    width: 300px;
    padding: 15px 15px;
    font-weight: bold;
    border-radius: 50%;
    transition-property: border-radius, letter-spacing, color;
    transition-duration: 1s;
}

.circle-square:hover {
    border-radius: 0;
    letter-spacing: 10px;
    color: blue;
}

برای تبدیل آن به یک مربع، روی دایره حرکت کنید.

Squareify


 این افکت جالب با استفاده از box-shadow می‌تواند یک مرز داخلی به یک عنصر اضافه کند.

p.inner-border {
    display: flex;
    height: 200px;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border: 30px solid lightblue;
    margin: 1em auto 1em auto;
    width: 100%;
    padding: 15px 15px;
    font-weight: bold;
    transition-property: box-shadow, color;
    transition-duration: 1s;
}

.inner-border:hover {
    box-shadow: inset 0 0 0 30px lightskyblue;
}

 برای اضافه کردن یک مرز داخلی، روی مستطیل حرکت کنید.

Inner Border Effect via Box Shadow


شما می‌توانید این خصوصیات انتقال را انباشته کنید. در این قسمت، ما یک انتقال را به box-shadow ، background-color، رنگ (color) و فاصله حرف (letter-spacing) از عنصر اضافه خواهیم کرد و آن را برای یک افکت مرتب می‌کند.

p.four-transitions {
    display: flex;
    height: 200px;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border: 30px solid lightblue;
    margin: 1em auto 1em auto;
    width: 100%;
    padding: 15px 15px;
    font-weight: bold;
    transition-property: box-shadow, background-color, color, letter-spacing;
    transition-duration: 1s;
}

.four-transitions:hover {
    box-shadow: inset 0 0 0 30px lightskyblue;
    background-color: lightcyan;
    color: darkblue;
    letter-spacing: 30px;
}

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

Four Property Transitions!

ایجاد یک دکمه افکت فشار (Button Push Effect)

می‌توانیم از تمام تکنیک‌هایی که تاکنون آموخته‌ایم برای ایجاد برخی از افکت‌های دکمه فشار جالب در منوی flexbox استفاده کنیم.

html:

<ul id="flex-menu">
    <li><a class="flex-item" href="">HTML</a></li>
    <li><a class="flex-item" href="">JavaScript</a></li>
    <li><a class="flex-item" href="">CSS</a></li>
    <li><a class="flex-item" href="">PHP</a></li>
    <li><a class="flex-item" href="">Linux</a></li>
    <li><a class="flex-item" href="">Windows</a></li>
    <li><a class="flex-item" href="">Cloud</a></li>
</ul>

css:

ul#flex-menu {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

a.flex-item {
    display: block;
    margin: 5px;
    padding: .6em 2em;
    text-decoration: none;
    text-align: center;
    color: darkslategrey;
    letter-spacing: .2em;
    font-weight: bold;
    background-color: lightyellow;
    border: 5px solid lightgrey;
    border-radius: 6px;
    box-shadow: 0 4px 2px rgba(0, 0, 0, .5);
    position: relative;
    top: 0px;
    transition: all .3s;
}

a.flex-item:hover, a.flex-item:focus {
    background-color: #ffe686;
    border-color: #ffd13f;
}

a.flex-item:active {
    top: 3px;
    box-shadow: 0 1px 2px darkgray;
}

 روی یک آیتم از منو حرکت کنید، سپس برای به دست اوردن افکت  button press  دکمه را فشار داده و نگه دارید. عمل کلیک و نگه داشتن باعث می‌شود دکمه‌ای که تحت فشار قرار دارد به سمت پایین فشرده شود.

آموزش  Transforms در CSS

در بخش اول این مقاله در مورد CSS Transitions بحث کردیم که ساده‌ترین روش برای افزودن افکت هموار سازی بر روی عناصر هستند، زیرا بین دو حالت تغییر می‌کنند. حال می‌توانیم به CSS Transforms نگاهی بیندازیم که به نوعی سطح بعدی قدرت در فناوری‌های CSS Animations است. CSS Transforms می‌تواند عناصر صفحه وب خود را در انواع مختلف از روش‌های جالب تبدیل کند. ما می‌توانیم با CSS Transforms  کارهایی مانند کشش یک عنصر (stretch an element)، تغییر مختصات یک عنصر (change the coordinates of an element)، چرخش عناصر (rotate elements) و موارد دیگر را انجام ‌دهیم.

خصوصیت transform   در CSS می‌تواند یک مقدار کامل از مقادیر را برای تغییر فضای مختصات از مدل قالب بندی تصویری CSS بپذیرد. در زیر لیستی از مقادیری که می‌توانید با خصوصیت transform  استفاده کنید، وجود دارد:

  • rotate(): یک عنصر صفحه را در اطراف یک نقطه ثابت در صفحه 2D می‌چرخاند.
  • rotateX(): یک عنصر صفحه را در اطراف abscissa (محور افقی) می‌چرخاند.
  • rotateY(): یک عنصر صفحه را در اطراف محور عمودی می‌چرخاند.
  • rotateZ(): یک عنصر صفحه را در اطراف محور z می‌چرخاند.
  • rotate3d(): یک عنصر صفحه را در یک محور ثابت در فضای 3D می‌چرخاند.
  • translate(): موقعیت عناصر را در جهت افقی یا عمودی تغییر می‌دهد.
  • translateX(: موقعیت یک عنصر را به صورت افقی در صفحه 2D تغییر می‌دهد.
  • translateY(): موقعیت یک عنصر را به صورت عمودی در صفحه 2D تغییر می‌دهد.
  • scale(): اندازه عنصر تغییر می‌دهد.
  • scaleX(): اندازه عنصر را به صورت افقی تغییر می‌دهد.
  • scaleY(): اندازه عنصر را به صورت عمودی تغییر می‌دهد.
  • skew():  یک افکت شیب (tilt effect) به عنصر می‌دهد
  • skewX(): به صورت افقی به عنصر شیب می‌دهد.
  • skewY(): به صورت عمودی به عنصر شیب می‌دهد.

اکنون که می‌دانیم با همه مقادیر مختلف برای تبدیل چه کاری می‌توان انجام داد، اجازه دهید گروهی از مثال‌ها را مشاهده کنیم، می‌توانیم با یک ابر ساده شروع کنیم.

<div class="cloudwrapper">
    <img class="cloud" src="cloud.png">
</div>
.cloudwrapper {
    text-align: center;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

آموزش  Transforms در CSS

()translateX

تابع  translateX() موقعیت یک عنصر را به صورت افقی در صفحه 2D تغییر می‌دهد. این به این معنی است که ما می‌توانیم ابر خود را فقط کمی به سمت راست حرکت دهیم.

.cloud {
    transform: translateX(150px);
}

آموزش  Transforms در CSS

scaleX()

تابع scaleX() در  CSS  یک عنصر را در امتداد محور x که به صورت افقی است، تغییر می‌دهد. این بدان معنی است که می‌توانیم ابر خود را دو برابر بزرگتر از اینجا به صورت افقی بسازیم:

.cloud {
    transform: scaleX(2);
}

آموزش  Transforms در CSS

scale()

تابع scale()   می‌تواند بیش از یک مقدار را بپذیرد. مقدار دوم در این مثال در محور y  نیز مقیاس دارد. بنابراین، این ابر به صورت افقی و عمودی مقیاس خواهد شد:

.cloud {
    transform: scale(2, 2);
}

آموزش  Transforms در CSS

rotate()

با تابع rotate()   در CSS می‌توانیم عناصر را در صفحه بچرخانیم. این تابع یک عنصر را در یک نقطه ثابت در صفحه 2D می‌چرخاند. بیایید چند مثال را مشاهده کنیم. از دو تصویر برای ارائه افکت زیبا با تابع rotate()   استفاده شده است.

تصویر اول از کدری (opacity) کمتری برای نشان دادن موقعیت اصلی در مقابل موقعیت transformed برخوردار است.

<div class="container">
    <img src="waterfall.jpg" class="one">
    <img src="waterfall.jpg" class="two">
</div>
.container {
    position: relative;
    width: 700px;
    height: 400px;
    padding: 0px 15px 100px 15px;
}

.one, .two {
    position: absolute;
    top: 0;
    left: 0;
    margin: 40px;
}

.one {
    opacity: .3;
}

.two {
    transform: rotate(-15deg);
}

آموزش  Transforms در CSS

transform-origin

هنگام استفاده از تابع rotate () با خصوصیت   transform  ، می‌توانیم از transform-origin نیز برای تغییر موقعیت عناصر تبدیل شده استفاده کنیم. به عبارت دیگر، می‌توانیم مکان محوری را که عنصر روی آن چرخانده می‌شود، مشخص کنیم. مقدار برای transform-origin   می‌تواند اندازه گیری طول، کلمات کلیدی یا مقادیر درصد باشد. مقدار اول داده شده افست افقی (offset horizontally) است، در حالی که مقدار دوم آفست عمودی (offset vertically) است.

<div class="container">
    <img src="apple.jpg" class="one">
    <img src="apple.jpg" class="three">
</div>
.one, .three {
    position: absolute;
    top: 0;
    left: 0;
    margin: 100px;
}

.one {
    opacity: .3;
}

.three {
    transform: rotate(20deg);
    transform-origin: top center;
}

توجه کنید که چگونه با تنظیم transform-origin: top center;  ، تصویر از آن مکان برای چرخش از آن استفاده می‌کند.

آموزش  Transforms در CSS

در اینجا ما می‌توانیمtransform-origin: right bottom;  را برای دیدن نحوه تغییر این افکت تنظیم کنیم:

<div class="container">
    <img src="autumn.jpg" class="one">
    <img src="autumn.jpg" class="four">
</div>

 

.container {
    position: relative;
    width: 800px;
    height: 300px;
    padding: 150px;
}

.one, .four {
    position: absolute;
    top: 0;
    left: 0;
    margin: 100px;
}

.one {
    opacity: .3;
}

.four {
    transform: rotate(20deg);
    transform-origin: right bottom;
}

اکنون آنچه را که انتظار داشتیم دریافت می‌کنیم. تصویر در حال چرخش از ناحیه پایین سمت راست است.

آموزش  Transforms در CSS

علاوه بر این، برای توصیف  transform-origin ، شما می‌توانید با مختصات دقیق مشخص کنید.

<div class="container">
    <img src="bench.jpg" class="one">
    <img src="bench.jpg" class="five">
</div>

آموزش  Transforms در CSS

()translate

تابع translate()   در CSS موقعیت یک عنصر را در جهت افقی و جهت عمودی در صورت تمایل تغییر می‌دهد. اگر فقط نیاز به موقعیت‌ یابی دوباره افقی یا عمودی داشتید، می‌توانید از translateX()  یا  translateY() استفاده کنید.

<div class="container">
    <img src="butterfly.jpg" class="one">
    <img src="butterfly.jpg" class="two">
</div>
.container {
    position: relative;
    width: 800px;
    height: 300px;
    padding: 100px;
}

.one, .two {
    position: absolute;
    top: 0;
    left: 0;
    margin: 50px;
}

.one {
    opacity: .3;
}

.two {
    transform: translate(90px, 60px);
}

 

آموزش  Transforms در CSS

تابع translate () همچنین می تواند مقادیر منفی را برای افکت‌های جالب بپذیرد.

<div class="container">
    <img src="boards.jpg" class="one">
    <img src="boards.jpg" class="four">
</div>
.container {
    position: relative;
    width: 800px;
    height: 300px;
    padding: 100px;
}

.one {
    position: absolute;
    top: 0;
    left: 0;
    margin: 50px;
}

.one {
    opacity: .3;
}

.four {
    transform: translate(-5%, -25%);
}

 

آموزش  Transforms در CSS

 

 

در اینجا ما مجدداً از تابع scale()   استفاده می‌کنیم تا یک تصویر مرتب را در افکت تصویر ایجاد کنیم.

<div class="container">
    <img src="abstractcolors.jpg" class="one">
    <img src="abstractcolors.jpg" class="three">
</div>
.container {
    position: relative;
    width: 800px;
    height: 300px;
    padding: 50px 100px;
}

.one, .three {
    position: absolute;
    top: 0;
    left: 0;
    margin: 50px;
}

.one {
    opacity: .3;
}

.three {
    transform: scale(.75);
}

 

آموزش  Transforms در CSS

 استفاده از scale()   با استفاده از یک تصویر باعث ایجاد یک افکت زیبا می‌شود.

<div class="container">
    <img src="brushstrokes.jpg" class="one">
    <img src="brushstrokes.jpg" class="four">
</div>

 

.container {
    position: relative;
    width: 800px;
    height: 300px;
    padding: 50px 100px;
}

.one, .four {
    position: absolute;
    top: 0;
    left: 0;
    margin: 50px;
}

.one {
    opacity: .3;
}

.four {
    transform: scale(1.5, .5);
}

 

آموزش  Transforms در CSS

Skews

از مقادیر مختلف انحراف مانندskew () ، skewX()  و skewY () برای تغییر زاویه در هر دو یا هر یک از محورها با تعداد معینی از درجه استفاده می‌شود، این باعث افکت‌های استایل شیب می‌شود. این اولین مثال از skewX () یک افکت شیب به تصویر می‌دهد.

<div class="container">
    <img src="splatter2.jpg" class="one">
    <img src="splatter2.jpg" class="three">
</div>
.container {
    position: relative;
    width: 800px;
    height: 300px;
    padding: 120px;
}

.one, .two {
    position: absolute;
    top: 0;
    left: 0;
    margin: 150px;
}

.one, .two {
    margin-top: 50px;
    margin-bottom: 50px;
}

.one {
    opacity: .3;
}

.two {
    transform: skewX(30deg);
}

 

آموزش  Transforms در CSS

 این استفاده از   skewY () چیزی را که تقریباً شبیه opening book است، ایجاد می‌کند.

<div class="container">
    <img src="splatter2.jpg" class="one">
    <img src="splatter2.jpg" class="three">
</div>
.container {
    position: relative;
    width: 800px;
    height: 300px;
    padding: 120px;
}

.one, .three {
    position: absolute;
    top: 0;
    left: 0;
    margin: 150px;
}

.one {
    margin-top: 50px;
    margin-bottom: 50px;
    opacity: .3;
}

.three {
    transform: skewY(20deg);
}

 

آموزش  Transforms در CSS

 در مثال زیر، skew () دو مقدار را برای انحراف بر روی دو سطح می‌گیرد.

<div class="container">
    <img src="splatter3.jpg" class="one">
    <img src="splatter3.jpg" class="four">
</div>
.container {
    position: relative;
    width: 800px;
    height: 300px;
    padding: 120px;
}

.one, .four {
    position: absolute;
    top: 0;
    left: 0;
    margin: 150px;
}

.one {
    margin-top: 50px;
    margin-bottom: 50px;
    opacity: .3;
}

.four {
    transform: skew(15deg, 20deg);
}

 

سه تصویر زیر از ترکیب scale()  و  rotate()  با هم استفاده می‌کنند که افکتی زیبا ایجاد می‌کند.

<div id="threepics" style="height: 200px;">
    <ul>
        <li><img src="sun.jpg" id="one"></li>
        <li><img src="water.jpg" id="two"></li>
        <li><img src="houses.jpg" id="three"></li>
    </ul>
</div>
#threepics ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#threepics li {
    float: left;
    margin-right: 10px;
}

#threepics li:last-of-type {
    margin-right: 0;
}

#threepics img {
    width: 200px;
    height: 150px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, .4);
    transition: transform .3s ease-in-out;
}

#threepics li:hover img {
    box-shadow: 6px 6px 6px rgba(0, 0, 0, .3);
}

#threepics li:hover #one, li:hover #one {
    transform: scale(2) rotate(-3deg);
}

#threepics li:hover #two, li:focus #two {
    transform: scale(2) rotate(5deg);
}

#threepics li:hover #three, li:focus #three {
    transform: scale(2) rotate(-7deg);
}

برای یک افکت زیبا روی هر تصویر حرکت کنید.

  • آموزش  Transforms در CSS

  • آموزش  Transforms در CSS

  • آموزش  Transforms در CSS

3D Transformations

همچنین، روش‌هایی وجود دارند که تغییرات شما را به افکت‌هایی تبدیل می‌کند که حس سه بعدی را به شما می‌دهد. برای این کار باید از خصوصیت perspective استفاده کرد. خصوصیت perspective را می‌توان به یک عنصر حاوی  (containing) اختصاص داد که به مرورگر دستور می‌دهد تا با عناصر فرزند طوری رفتار کند که گویی در یک فضای سه بعدی قرار دارند. مقدار داده شده به این خصوصیت یک عدد صحیح است که فاصله از مبداء عنصر بر روی محور z را مشخص می‌کند. بخاطر داشته باشید که محور X و Y افقی هستند، فاصله حروف را در یک صفحه وب و چشمان خود تصور کنید. در مثال اول، از این تکنیک‌ها برای ایجاد برخی تصاویر flipping مانند کارت استفاده می‌شود.

<ul>
    <li><img src="design1.jpg"></li>
    <li><img src="design2.jpg"></li>
    <li><img src="design3.jpg"></li>
</ul>
ul {
    width: 1000px;
    height: 150px;
    list-style-type: none;
    padding: 0;
    margin: 0;
    perspective: 500;
}

li {
    float: left;
    margin-right: 10px;
    transform: rotateY(50deg);
}

li img {
    width: 200px;
    height: 150px;
}

آموزش  Transforms در CSS

مثال دوم از 3-D Transforms برای ایجاد برخی تصاویر در یک Star Wars مانند perspective استفاده می‌کند. 

<ul>
    <li><img src="design4.jpg"></li>
    <li><img src="design5.jpg"></li>
    <li><img src="design6.jpg"></li>
</ul>
ul {
    width: 630px;
    height: 100px;
    list-style-type: none;
    padding: 0;
    margin: 0;
    perspective: 500;
}

li {
    float: left;
    margin-right: 10px;
    transform: rotateX(50deg);
}

li img {
    width: 200px;
    height: 150px;
}

آموزش  Transforms در CSS

نتیجه گیری

  CSS Transitions و  CSS Transformations یک روش عالی برای دادن یک ظاهر خوب به تجربیات کاربران است. آن‌ها کاملاً به زبان CSS ساخته شده اند، بنابراین، شما می‌توانید بدون نیاز به جاوا اسکریپت، افکت‌های زیبایی داشته باشید. Transitions انتقال مدت زمان تغییر یک عنصر را مشخص می‌کند و حالت آرام را با گذشت زمان تغییر می‌دهد و بدون آن‌ها، تغییر حالت بصری، ناگهانی و فوری است. برای اعمال تغییرات (Transitions)، می‌توانید از خصوصیات transition-property (مورد نیاز)، transition-duration (لازم)، transition-timing-function و transition-delay استفاده کنید. Transformها به طراحان وب این امکان را می‌دهد که ظاهر یک عنصر را در یک سطح 2D جابجا یا تغییر دهند. آن‌ها معمولاً با تغییر حالت شناور شروع می‌شوند. چهار نوع از transforms عبارتند از Rotate ،Skew ،Scale و Translate. معقول است که هنگام استفاده از transformها از transitions استفاده کنید تا افکت صاف و تدریجی حاصل شود. 

مطالعه بیشتر در لیداوب:

 این قسمت از آموزش نیز به پایان رسید. با آموزش‌های بعدی در لیداوب با ما همراه باشید. می‌توانید نظرات و دیدگاه‌های خودتان را در بخش کامنت‌ها با ما در میان بگذارید.

 

دیدگاه ها

دیدگاه ها : 0


متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند

رایگان

اشتراک گذاری در
ثبت امتیاز
5 (1 رای)

   لطفا صبر کنید ...