در آموزش امروز می خواهیم تا افکت Transition را روی کادرهای دایره ای تست و آزمایش کنیم و به شما آموزش بدیم. ما از Border Radius برای ایجاد یک Shape دایره ای استفاده و روی آن کار می کنیم.
حالا چرا دایره ؟ چون عملا بسیاری از طراحان مستطیل را برای کار خودشان انتخاب می کنند . اما شما با یک افکت دایره ای خاص جلوه ای دو چندان به وب سایت خود می دهید. به همین دلیل یک شکل خاص محسوب می شود و ما می رویم تا برای hover روی دایره افکت گذاری کنیم و البته با CSS.
در این آموش ما تمام کدها را بررسی نمی کنیم و برای اجرای این کار مبنا را بر این قرار دادیم که شما به Html و CSS3 تا حدودی تسلط دارید. خب ، پس بیائید شروع کنیم.
به ادامه مطلب بروید..

مشاهده دموی اسکریپتدریافت اسکریپت

Html Markup

برای بسیاری از نمونه هایی که در آموزش یاد می گیرید از ساختار Html زیر استفاده می کنیم:

اگر چه مستقیما ما می توانیم عکس هایمان را در کد بالا لینک دهی کنیم ، اما برای آزادی بیشتر آنها را به عوان background-image در CSS قرار می دهیم. در این آموزش ما عکس ها را با کلاس ” ch-img ” نام گذاری کرده ایم و به ترتیب در انتهای هر کلاس اعداد مرتب ۱ , ۲, ۳ را قرار می دهیم.

در حال حاضر اجازه بدید بریم سر برخی از کدهای CSS برای Transition.

The CSS

در کد زیر برخی از استایل های معمولی CSS را برای نمای کلی و Li ها تعریف می کنیم.

.ch-grid {
    margin: 20px 0 0 0;
    padding: 0;
    list-style: none;
    display: block;
    text-align: center;
    width: 100%;
}

.ch-grid:after,
.ch-item:before {
    content: '';
    display: table;
}

.ch-grid:after {
    clear: both;
}

.ch-grid li {
    width: 220px;
    height: 220px;
    display: inline-block;
    margin: 20px;
}

ما توسط display : inlin-block و text-align : center اجزای مورد نظر خود را در وسط صفحه چینش کردیم. برای Clearfix هم از هک Nicolas Gallagher استفاده کردیم.

حالا می رویم تا اولین نمونه را درست کنیم.

مثال ۱


در مثال اول سعی می کنیم تمام کد را برای شما شرح و توضیح دهیم و در این مرحله یک box-shadow از نوع inset ایجاد می کنیم و بعد آن را Animate می کنیم.

.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    cursor: default;
    box-shadow: 
        inset 0 0 0 16px rgba(255,255,255,0.6),
        ۰ ۱px 2px rgba(0,0,0,0.1);
    transition: all 0.4s ease-in-out;
}

همانطور که در اول آموزش می بینید ما از دو کلاس متفاوت استفاده می کنیم . یکی برای خود div و یکی هم با نام ch-img که توسط آن background-image را تعریف می کنیم.

.ch-img-1 { 
    background-image: url(../images/1.jpg);
}

.ch-img-2 { 
    background-image: url(../images/2.jpg);
}

.ch-img-3 { 
    background-image: url(../images/3.jpg);
}

برای توضیحات المنت هم نوع Position را روی Absolute گذاشتم و برای ملایم شدن بگراند هم آن را مقداری با استفاده از RGBA ملایم کردم . همچنین مقدار Opacity را صفر قرار دادیم.

.ch-info {
    position: absolute;
    background: rgba(63,147,147, 0.8);
    width: inherit;
    height: inherit;
    border-radius: 50%;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease-in-out;
    transform: scale(0);
}

برای تایتل درون دایره هم مقداری padding و margin اضافه کردیم تا فیکس شود و برای جذاب شدن متن هم text-shadow را به آن اضافه نمودیم.

.ch-info h3 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 22px;
    margin: 0 30px;
    padding: 45px 0 0 0;
    height: 140px;
    font-family: 'Open Sans', Arial, sans-serif;
    text-shadow: 
        ۰ ۰ ۱px #fff, 
        ۰ ۱px 2px rgba(0,0,0,0.3);
}

برای پاراگرافمان هم Opacity را برابر با صفر قرار داده و یک Transition به آن اضافه کردیم ( مدت زمان ۱ ثانیه را برای افکت محو شدن تخصیص دادیم. )

.ch-info p {
    color: #fff;
    padding: 10px 5px;
    font-style: italic;
    margin: 0 30px;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.5);
    opacity: 0;
    transition: all 1s ease-in-out 0.4s;
}

برای لینک هم تصمیم گرفتیم تام حروف را برابر با uppercase و برای hover هم رنگ زرد را به آن اختصاص دهیم.

.ch-info p a {
    display: block;
    color: rgba(255,255,255,0.7);
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 4px;
    font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info p a:hover {
    color: rgba(255,242,34, 0.8);
}

و حالا ، یک افکت جذاب برای hover ! این آیتم را برای زمانی که ماوس روش می رود با کد زیر تعیین می کنیم. یک box-shadow از نوع inset به صورت radius از ۱۶px تا ۱px کوچک شود.

.ch-item:hover {
    box-shadow: 
        inset 0 0 0 1px rgba(255,255,255,0.1),
        ۰ ۱px 2px rgba(0,0,0,0.1);
}

توسط کد زیر هم قسمت توضیحات درون دایره یا همان description را fade می کنیم و سپس scale تا سایز ۱

.ch-item:hover .ch-info {
    transform: scale(1);
    opacity: 1;
}

و پاراگراف و description را هم فقط یک fadein با یک تاخیر زمانی قرار دادیم در کد زیر:

.ch-item:hover .ch-info p {
    opacity: 1;
}

حالا اولین مثال ما تکمیل شد. کافیست به این لینک برید و نمونه را مشاهده کنید. به همین راحتی ما افکتی به این زیبایی ایجاد کردیم . حال می رویم تا مثال دوم را با افکتی بهتر انجام دهیم.

مثال ۲


خب در این مثال ساختار Html Markup مانند مثال قبلی است.

در این مثال ما از box-shadow استفاده می کنیم به گونه ای که با رفتن ماوس روی دایره از سمت بیرون به داخل یک لایه دایره روی تمام لایه ها آمده و افکتی جذاب ایجاد می کند.

بنابر این در این مثال هیچ افکت خاص و ویژه ای در نظر نگرفته ایم و فقط همین box-shadow بهترین استایل را برای کاربر به نمایش می گذارد که در کد زیر اعمال کرده ایم:

.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    cursor: default;
    box-shadow: 
        inset 0 0 0 0 rgba(200,95,66, 0.4),
        inset 0 0 0 16px rgba(255,255,255,0.6),
        ۰ ۱px 2px rgba(0,0,0,0.1);
    transition: all 0.4s ease-in-out;
}

و اضافه کردن عکس های background-image با استفاده از کد زیر :

.ch-img-1 { 
    background-image: url(../images/4.jpg);
}

.ch-img-2 { 
    background-image: url(../images/5.jpg);
}

.ch-img-3 { 
    background-image: url(../images/6.jpg);
}

سپس کوچک کردن المنت description :

.ch-info {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease-in-out;
    transform: scale(0);
    backface-visibility: hidden;
}

و در نهایت استایل دادن تایپوگرافی به المنت ها:

.ch-info h3 {
    color: #fff;
    text-transform: uppercase;
    position: relative;
    letter-spacing: 2px;
    font-size: 22px;
    margin: 0 30px;
    padding: 65px 0 0 0;
    height: 110px;
    font-family: 'Open Sans', Arial, sans-serif;
    text-shadow: 
        ۰ ۰ ۱px #fff, 
        ۰ ۱px 2px rgba(0,0,0,0.3);
}

.ch-info p {
    color: #fff;
    padding: 10px 5px;
    font-style: italic;
    margin: 0 30px;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.5);
}

.ch-info p a {
    display: block;
    color: rgba(255,255,255,0.7);
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 4px;
    font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info p a:hover {
    color: rgba(255,242,34, 0.8);
}

خب حالا با کد زیر یک box-shadow از نوع inset با رنگ مایل به قرمز ایجاد کردیم که به عرض ۱۱۰px از بیرون به داخل حرکت می کند.

.ch-item:hover {
    box-shadow: 
        inset 0 0 0 110px rgba(200,95,66, 0.4),
        inset 0 0 0 16px rgba(255,255,255,0.8),
        ۰ ۱px 2px rgba(0,0,0,0.1);
}

حالا با کد زیر المنت description را که قبلا کوچک کرده بودیم را بزرگ می کنیم:

.ch-item:hover .ch-info {
    opacity: 1;
    transform: scale(1);    
}

<h3>مثال ۳


در این مثال با افکت Rotation بازی می کنیم و افکت می زنیم. در این مثال Html Markup کمی متفاوت تر از دو مثال قبلی است. در این مثال چون ما نیاز داریم تصاویر را به عنوان درب دایره بر روی لایه ها قرار دهیم پس قسمت List را باید به صورت زیر تغییر دهیم :

در کد زیر هم استایل اصلی لیست ها را تعیین می کنیم. قبل از هر چیز box-shadow را به آن نیز اعمال کردیم:

.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    cursor: default;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

در کد زیر استایل اولیه قسمت لایه بالایی که قراره حرکت کند یا همان Thumb را استایل می دهیم و بعدا قراره در مرحله آخر افکت Transition خودمان را به آن اختصاص دهیم.

.ch-thumb {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5);
    transform-origin: 95% 40%;
    transition: all 0.3s ease-in-out;
}

با استفاده از pseudo-class از نوع after : یک نقطه کوچک به حالت دکمه ایجاد می کنیم و یک گرادینت از نوع radial و مشکی رنگ به آن اختصاص می دهیم:

.ch-thumb:after {
    content: '';
    width: 8px;
    height: 8px;
    position: absolute;
    border-radius: 50%;
    top: 40%;
    left: 95%;
    margin: -4px 0 0 -4px;
    background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
    box-shadow: 0 0 1px rgba(255,255,255,0.9);
}

حالا تصاویر thumb را به کلاس ch-img اختصاص می دهیم :

.ch-img-1 { 
    background-image: url(../images/7.jpg);
    z-index: 12;
}

.ch-img-2 { 
    background-image: url(../images/8.jpg);
    z-index: 11;
}

.ch-img-3 { 
    background-image: url(../images/9.jpg);
    z-index: 10;
}

و برای المنت description هم استایل زیر را در نظر می گیریم:

.ch-info {
    position: absolute;
    width: inherit;
    height: inherit;
    border-radius: 50%;
    overflow: hidden;
    background: #c9512e url(../images/noise.png);
    box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05);
}

با استفاده از استایل زیر هم یک تایپوگرافی زیبا برای پاراگراف و سرتیتر داخل دایره در نظر می گیریم :

.ch-info h3 {
    color: #fff;
    text-transform: uppercase;
    position: relative;
    letter-spacing: 2px;
    font-size: 18px;
    margin: 0 60px;
    padding: 22px 0 0 0;
    height: 85px;
    font-family: 'Open Sans', Arial, sans-serif;
    text-shadow: 
        ۰ ۰ ۱px #fff, 
        ۰ ۱px 2px rgba(0,0,0,0.3);
}

.ch-info p {
    color: #fff;
    padding: 10px 5px;
    font-style: italic;
    margin: 0 30px;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.5);
}

حالا بهترین قسمت و یک ایده جالب اینست که بعد از کنار رفتن لایه بالایی یک دایره حرکت کند و بیاید به عنوان لینک که ما با استفاده از کد زیر استایل دادیم و حرکتش می دهیم.

.ch-info p a {
    display: block;
    color: #333;
    width: 80px;
    height: 80px;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    color: #fff;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 24px;
    margin: 7px auto 0;
    font-family: 'Open Sans', Arial, sans-serif;
    opacity: 0;
    transition: 
        transform 0.3s ease-in-out 0.2s,
        opacity 0.3s ease-in-out 0.2s,
        background 0.2s linear 0s;
    transform: translateX(60px) rotate(90deg);
}

.ch-info p a:hover {
    background: rgba(255,255,255,0.5);
}

حالا با استفاده از کد زیر opacity و یک delay اختصاص می دیم و به delay بک گراند دو کلاس رو مجزا کد دهی کردیم و سپس المنت بالایی را طوری تنظیم کردیم که با رفتن ماوس روی آن به سمت راست حرکت می کند.

.ch-item:hover .ch-thumb {
    box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2);
    transform: rotate(-110deg);
}
.ch-item:hover .ch-info p a{
    opacity: 1;
    transform: translateX(0px) rotate(0deg);
}

مثال ۴


در مثال چهارم ما یک افکت چرخشی ۳D و یک بعدی را آموزش می دیم. بنابر این ما نیاز به تنظیم ساختار پرسپکتیو در دایره داخلی داریم به گونه ای که با چرخش نمای پشت دایره را نمایش بدهد.

بنابر این کدهای Html در لیست ها به صورت زیر تغییر پیدا می کند :

همانطور که می بینید ما یک background-image در div زیری اختصاص دادیم و سپس در div بالایی با کلاس ch-info-wrap همان بک گراند را اضافه می کنیم. با این روش شما یک شعبده بازی با CSS اجرا می کنید.

برای لیست خود یک استایل ساده مانند زیر را در نظر می گیریم :

.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    cursor: default;
}

و حالا به wrapper خودمان می خواهیم یک transition به box-shadow بدیم :

.ch-info-wrap{
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    perspective: 800px;
    transition: all 0.4s ease-in-out;
    top: 20px;
    left: 20px;
    background: #f9f9f9 url(../images/bg.jpg);
    box-shadow: 
        ۰ ۰ ۰ ۲۰px rgba(255,255,255,0.2), 
        inset 0 0 3px rgba(115,114, 23, 0.8);

}

کلاس ch-info نیاز دارد یک پرسپکتیو سه بعدی با استفاده از transform-style رویش اجرا کنیم و سپس برای چرخش آن از روش transition بهره ببریم مانند کد زیر :

.ch-info{
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    transition: all 0.4s ease-in-out;
    transform-style: preserve-3d;
}

و برای جلو و پشت آن یک استایل در نظر بگیریم :

.ch-info > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-position: center center;
    backface-visibility: hidden;
}

و برای پشت دایره زمانی که بر می گردد یک رنگ انتخاب می کنیم:

.ch-info .ch-info-back {
    transform: rotate3d(0,1,0,180deg);
    background: #000;
}

و دوباره عکس های دایره ها را به عنوان background-image به کلاس های ch-img اختصاص دهیم :

.ch-img-1 { 
    background-image: url(../images/10.jpg);
}

.ch-img-2 { 
    background-image: url(../images/11.jpg);
}

.ch-img-3 { 
    background-image: url(../images/12.jpg);
}

و حال با کد زیر برای فونت ها یک استایل تایپوگرافی می دهیم:

.ch-info h3 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
    margin: 0 15px;
    padding: 40px 0 0 0;
    height: 90px;
    font-family: 'Open Sans', Arial, sans-serif;
    text-shadow: 
        ۰ ۰ ۱px #fff, 
        ۰ ۱px 2px rgba(0,0,0,0.3);
}

.ch-info p {
    color: #fff;
    padding: 10px 5px;
    font-style: italic;
    margin: 0 30px;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.5);
}

.ch-info p a {
    display: block;
    color: rgba(255,255,255,0.7);
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 4px;
    font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info p a:hover {
    color: rgba(255,242,34, 0.8);
}

و برای زمانی که ماوس روی دایره می رود ، ما box-shadow را برای wrapper تغییر می دهیم و سپس کلاس ch-info را با استفاده از transform چرخ می دهیم :

.ch-item:hover .ch-info-wrap {
    box-shadow: 
        ۰ ۰ ۰ ۰ rgba(255,255,255,0.8), 
        inset 0 0 3px rgba(115,114, 23, 0.8);
}

.ch-item:hover .ch-info {
    transform: rotate3d(0,1,0,-180deg);
}

مثال ۵


در این مثال ما می خواهیم قسمت داخلی دایره را با رفتن ماوس روی آن به اندازه ۰px کوچک کرده و قسمت توضیحات را از سایز بزرگ به اندازه دایره قبلی جایگزین کنیم.
ساختار Html این مثال مانند مثال قبلی یعنی شماره ۴ است.

استایل کلاس ch-item یا همان لیست ها را به صورت زیر تعیین می کنیم :

.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    cursor: default;
}

و برای wrapper و description هم از استایل زیر استفاده می کنیم :

.ch-info-wrap, 
.ch-info{
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
}

حالا با کد زیر یک ترفند انجام می دهیم و همان پس زمینه را به wrapper اختصاص می دهیم :

.ch-info-wrap {
    top: 20px;
    left: 20px;
    background: #f9f9f9 url(../images/bg.jpg);
    box-shadow: 
        ۰ ۰ ۰ ۲۰px rgba(255,255,255,0.2), 
        inset 0 0 3px rgba(115,114, 23, 0.8);

}

تعریف استایل پشت و روی div مورد نظر :

.ch-info > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-position: center center;
}

استایل زیر را برای ناپدید کردن دایره وسط قرار داده ایم :

.ch-info .ch-info-front {
    transition: all 0.6s ease-in-out;
}

و برای پشت کار یا در اصل همان قسمت نامرئی توضیحات و description مقدار opacity را صفر قرار می دهیم و سایز آن را در اندازه ۱٫۵ برابر بزرگ می کنیم:

.ch-info .ch-info-back {
    opacity: 0;
    background: #223e87;
    pointer-events: none;
    transform: scale(1.5);
    transition: all 0.4s ease-in-out 0.2s;
}

تنظیم یک استایل تایپوگرافی و اضافه کردن عکسها به روش Background-image :

.ch-img-1 { 
    background-image: url(../images/13.jpg);
}

.ch-img-2 { 
    background-image: url(../images/14.jpg);
}

.ch-img-3 { 
    background-image: url(../images/15.jpg);
}

.ch-info h3 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 18px;
    margin: 0 15px;
    padding: 40px 0 0 0;
    height: 80px;
    font-family: 'Open Sans', Arial, sans-serif;
    text-shadow: 
        ۰ ۰ ۱px #fff, 
        ۰ ۱px 2px rgba(0,0,0,0.3);
}

.ch-info p {
    color: #fff;
    padding: 10px 5px 0;
    font-style: italic;
    margin: 0 30px;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.5);
}

.ch-info p a {
    display: block;
    color: #e7615e;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 4px;
    font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info p a:hover {
    color: #fff;
}

زمانی که ماوسی روی دایره می رود ، الان باید دایره مرکز را opacity آن را برابر با صفر قرار بدیم و سپس محو کنیم. به گونه ای که پس از محو شدن دوباره به حالت اول برگردد ، پس کد زیر را به کار می بریم :

.ch-item:hover .ch-info-front {
    transform: scale(0);
    opacity: 0;
}

خب در مرحله آخر هم scale را برای قسمت description برابر ۱ قرار می دهیم و آن را fade-in می کنیم. همچنین برای اینکه لینک ما قابلیت کلیکی کردن داشته باشد pointe-events را برابر با auto گذاشتیم :

.ch-item:hover .ch-info-back {
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
}

مثال ۶


در این مثال قسمت داخلی دایره مانند درب به سمت پایین باز شده و توضیحات در وسط دایره درج می شود.
کدهای Html این مثال هم مانند دو مثال قبلی است.
آیتم ها را اول از همه استایل دهی می کنیم :

.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    cursor: default;
}

استایل معمولی برای wrapper و description قرار می دهیم :

.ch-info-wrap, 
.ch-info{
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    transition: all 0.4s ease-in-out;
}

و افکت پرسپکتیو را برای wrapper اختصاص می دهیم :

.ch-info-wrap {
    top: 20px;
    left: 20px;
    background: #f9f9f9 url(../images/bg.jpg);
    box-shadow: 
        ۰ ۰ ۰ ۲۰px rgba(255,255,255,0.2), 
        inset 0 0 3px rgba(115,114, 23, 0.8);
    perspective: 800px;
}

و برای المنت info نیاز داریم transform-style را هم اضافه می کنیم :

.ch-info {
    transform-style: preserve-3d;
}

و برای جلو و پشت کار هم نیاز به transition داریم . این را در نظر داشته باشید که پشت صفحه باید در حالت hidden قرار بگیرد و بعد از حرکت لایه بالایی نمایان می شود.

.ch-info > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-position: center center;
    transition: all 0.6s ease-in-out;
}

و حالا باید یک عدد مناسب برای transform-origin تعیین کنیم تا درب به سمت پایین باز شود :

.ch-info .ch-info-front {
    transform-origin: 50% 100%; 
    z-index: 100;
    box-shadow: 
        inset 2px 1px 4px rgba(0,0,0,0.1);
}

حالا برای پس زمینه یک رنگ عالی به روش RGBA ایجاد می کنیم :

.ch-info .ch-info-back {
    background: rgba(230,132,107,0);
}

و در این قسمت هم کدهای CSS معمولی را برای قسمت ها و المنت های دیگر تعیین می کنیم:

.ch-img-1 { 
    background-image: url(../images/16.jpg);
}

.ch-img-2 { 
    background-image: url(../images/17.jpg);
}

.ch-img-3 { 
    background-image: url(../images/18.jpg);
}

.ch-info h3 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
    margin: 0 25px;
    padding: 40px 0 0 0;
    height: 90px;
    font-family: 'Open Sans', Arial, sans-serif;
    text-shadow: 
        ۰ ۰ ۱px #fff, 
        ۰ ۱px 2px rgba(0,0,0,0.3);
}

.ch-info p {
    color: #fff;
    padding: 10px 5px;
    font-style: italic;
    margin: 0 30px;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.5);
}

.ch-info p a {
    display: block;
    color: rgba(255,255,255,0.7);
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 4px;
    font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info p a:hover {
    color: rgba(255,242,34, 0.8);
}

در آخر هم قسمت جلویی را برای hover آماده می کنیم و تعیین می کنیم زمانی که ماوس آمد box-shadow اجرا شود و رنگ پس زمینه هم fade شود و تمام.

.ch-item:hover .ch-info-front {
    transform: rotate3d(1,0,0,-180deg);
    box-shadow: 
        inset 0 0 5px rgba(255,255,255,0.2), 
        inset 0 0 3px rgba(0,0,0,0.3);
}

.ch-item:hover .ch-info-back {
    background: rgba(230,132,107,0.6);
}

مثال ۷


در مثال آخر هم ما دایره را حول یک محور مکعبی به سمت پایین هل می دهیم . در این مثال ما نیاز به wrapper اضافی نداریم. بنابر این از کدهای Html زیر برای لیست استفاده می کنیم :

و حالا یک مقدار پرسپکتیو به اندازه ۹۰۰ پیکسل ایجاد می کنیم :

.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    cursor: default;
    perspective: 900px;
}

و برای کلاس ch-info هم افکت preserve-3d را می دهیم:

.ch-info{
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

و حالا برای جلو و عقب کار یک transition و transform ایجاد می کنیم که از ۵۰% به ۰% تغییر پیدا کند:

.ch-info > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-position: center center;
    transition: all 0.4s linear;
    transform-origin: 50% 0%;
}

یک box-shadow برای قسمت جلویی اختصاص می دهیم :

.ch-info .ch-info-front {
    box-shadow: inset 0 0 0 16px rgba(0,0,0,0.3);
}

و قسمت پشتی را چرخش می دهیم داخل مکعب و به سمت پایین هدایت می کنیم :

.ch-info .ch-info-back {
    transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    background: #000;
    opacity: 0;
}

و حالا استایل معمول را برای بک گراند و دیگر المنت ها می دهیم :

.ch-img-1 { 
    background-image: url(../images/19.jpg);
}

.ch-img-2 { 
    background-image: url(../images/20.jpg);
}

.ch-img-3 { 
    background-image: url(../images/21.jpg);
}

.ch-info h3 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 24px;
    margin: 0 15px;
    padding: 60px 0 0 0;
    height: 110px;
    font-family: 'Open Sans', Arial, sans-serif;
    text-shadow: 
        ۰ ۰ ۱px #fff, 
        ۰ ۱px 2px rgba(0,0,0,0.3);
}

.ch-info p {
    color: #fff;
    padding: 10px 5px;
    font-style: italic;
    margin: 0 30px;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.5);
}

.ch-info p a {
    display: block;
    color: rgba(255,255,255,0.7);
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 4px;
    font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info p a:hover {
    color: rgba(255,242,34, 0.8);
}

و هم اکنون با استفاده از کد زیر قسمت جلویی را روی محور عمودی Y حرکت می دهیم و آن را fade-out می کنیم تا محو شود و البته به آرامی:

.ch-item:hover .ch-info-front {
    transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    opacity: 0;
}

و قسمت پشتی را تعیین می کنیم از عقب به سمت div جلویی حرکت کند و نمایی عالی را ایجاد کند :

.ch-item:hover .ch-info-back {
    transform: rotate3d(1,0,0,0deg);
    opacity: 1;
}

خب به همین راحتی شما ۷ افکت واقعا فوق العاده ایجاد کردید . همچنین اگر خلاقیت داشته باشید می توانید همین کدها را تغییر داده و افکتی بهتر ایجاد کنید.

مشاهده دموی اسکریپتدریافت اسکریپت

منبع: وب هاب

10517 بازدید

۳۱ مرداد ۱۳۹۱ / آموزش

۱۲ دیدگاه برای این مطلب ارسال شده است !

  • اشکان روشنایی / در تاریخ ۲۰ شهریور ۱۳۹۱

    علیرضای عزیز، ممنون از مطلب خوب و توضیحات کامل و جامعت. یه پیشنهاد داشتم: لینک مشاهده دموی اسکریپت رو اول نوشته هات هم بیار تا به خصوص در مطالب طولانی تر که نیاز به انگیزه برای خوندن داره بتونه این حس و انگیزه رو ایجاد کنه. امیدوارم موفق و پیروز باشی و به نوشتن ادامه بدی.

  • علیرضا / در تاریخ ۲۰ شهریور ۱۳۹۱

    ممنون اشکان جان،اتفاقاً خودم تصمیم داشتم از پُستای بعدی این کارو انجام بدم، ممنون از نظرت :X

  • B4R0N / در تاریخ ۳ مهر ۱۳۹۱

    زودباش اعتراف کن مهندس
    لبخند ملیحت برای چی بووود؟؟؟؟؟؟؟؟:دی

  • B4R0N / در تاریخ ۹ مهر ۱۳۹۱

    مهندس ما کشته ی روووووز نوشتاااااااااااای زیباتووونیم!!
    بنویس دیگه خوب

  • Aquila / در تاریخ ۲۵ خرداد ۱۳۹۲

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

  • mahdi khalili / در تاریخ ۱۴ بهمن ۱۳۹۲

    قالب سایتت و طراحیش رو میپسندم جالبه برام خیلی جاهاشو جالب درست کردی 🙂

  • nahid / در تاریخ ۱۳ تیر ۱۳۹۳

    من از ی قالب آماده دارم استفاده میکنم ک چند تا دایره داخلش داره ومیخوام این دایره ها افکتشون مثل نمونه ۶ بشه
    ولی نمیدونم چطوری باید ازش استفاده کنم.
    میشه راهمناییم کنید.
    ممنونم.

  • faranak / در تاریخ ۱۸ بهمن ۱۳۹۳

    سلام
    ممنون از زحماتتون
    برای گذاشتن این کدها در ماِژول html دات نت نیوک چه تغییراتی باید بدم؟

    • علیرضا / در تاریخ ۱۸ بهمن ۱۳۹۳

      شما کدهای htnl این اسکریپت را در داخل قالب یا ماژول html قرار دهید و سپس کد های CSS را در فایل استایل خود قرار دهید و یا فایل استایل را در داخل قالب لینک دهید.!

    ارسال پاسخ !

    بالا