azami.cu@gmail.com | +98912 373 8239

ایجاد یک جعبه 3 بعدی با CSS

از مجموعه تکنیک های CSS - برای حرفه ای شدن
 3D cube, a3D cube effect, css3 3D cube, جعبه 3 بعدی css3, جعبه 3 بعدی, css تکنیک, css آموزش css مثال
به همت مهندس اعظمی در 1392/10/07

سلام بر شما دوستان عزیز



توی این پست میخوایم یه جعبه 3 بعدی زیبا رو با استفاده از CSS3 ایجا بکنیم، مطمئن هستم که خوشتون میاد.

کدهای HTML

همونطور که از کدها مشخصه ما سه وجه مکعب مون رو با div ایجاد میکنیم:

Content
Content
Content

و این هم کدهای CSS

//استایل دادن به حمل کننده وجه های مکعب                                    
.cube {
        position: relative;
        top: 200px;
}

//استایلی که در تمام وجه ها مشترک هست
.rightFace,.leftFace,.topFace div {
        padding: 10px;
        width: 180px;
        height: 180px;
}

.rightFace,.leftFace,.topFace {
        position: absolute;
}

//استایل وجه سمت چپ که اونو تا زاویه 30 درجه در محور عمود کج میکنیم
.leftFace {
        -webkit-transform: skewY(30deg);
        -moz-transform: skewY(30deg);
        background-color: #ccc;
}

//استایل وجه سمت راست که اونو تا زاویه 30 درجه منفی در محور عمود کج میکنیم
.rightFace {
        -webkit-transform: skewY(-30deg);
        -moz-transform: skewY(-30deg);
        background-color: #ddd;
        left: 200px;
}

//استایل وجه بالا  که اونو تا زاویه 30 درجه منفی در محور عمود کج میکنیم
//و بعد از اون تا مقیاس 1.16 بزرگ میکنیم
.topFace div {
        -webkit-transform: skewY(-30deg) scaleY(1.16);
        -moz-transform: skewY(-30deg) scaleY(1.16);
        background-color: #eee;
        font-size: 0.862em;
}

//و در پایان والدش رو 60 درجه میچرخونیم
.topFace {
        -webkit-transform: rotate(60deg);
        -moz-transform: rotate(60deg);
        top: -158px;
        left: 100px;
}
                        


دیدید اصلا کاری نداشت
اینم پیش نمایش:


گروه گرافیکی سارات

بیا تا گل برافشانیم و می در ساغر اندازیم

فلک را سقف بشکافیم و طرحی نو در اندازیم
به امید دیدار شما

امید وارم با دیدن این مثال ها ذهن خودتون باز بشه و بتونید استایل های فوق العاده ای رو بوجود بیارید.

فقط این نکته رو فراموش نکنید که این کار با CSS3 انجام میشه و فقط در مرورگرهای جدید قابل نمایش هستش.



با تشکر از توجه شما -با عضویت در sarat از آخرین آموزش ها و مطالب با خبر شوید.



Tags: , , , , , ,



Tags:   3D cube, a3D cube effect, css3 3D cube, جعبه 3 بعدی css3, جعبه 3 بعدی, css تکنیک, css آموزش css مثال