ধাপ ৩- থ্রী ডি বক্স গঠন

এখন আমাদের থ্রী ডি বক্স বানাতে হবে।। ধাপে ধাপে এগিয়ে যাব ইনশাল্লাহ কোন বাধা ছারাই।।

ঝটপট নিচের কোড গুলো টাইপ করে ফেলেন ,

#slideshow {
width: 900px;
margin: 50px auto 0 auto;
padding: 50px 0 0 0;
-webkit-perspective: 800; /* triggers a 3D space */
}
<pre>

figure {
display: inline;
-webkit-transform-style: preserve-3d; /* maintains 3D space */
}

#box img:nth-child(1) {
-webkit-transform: rotateX(0deg) translateZ(200px);
}

#box img:nth-child(2) {
-webkit-transform: rotateX(180deg) translateZ(200px);
}

#box img:nth-child(3) {
-webkit-transform: rotateX(90deg) translateZ(200px);
}

#box img:nth-child(4) {
-webkit-transform: rotateX(-90deg) translateZ(200px);
}

#box img:nth-child(5) {
-webkit-transform: rotateY(-90deg) translateZ(200px);
}

#box img:nth-child(6) {
-webkit-transform: rotateY(90deg) translateZ(700px);
}

এবার আসুন একটু প্রেক্টিকাল ভাবে দেখি কি ভাবে কাজ করা যাবে।। নিচের ছবি টা দেখুন এখানে
এখানে একটু ভাল ভাবে খেয়াল করুন, প্রথম ইমেজ টা হবে ২০০ পিক্সেল এর এবং x অক্ষ বরাবর ১৮০ ডিগ্রি কোনে অবস্থান করবে।।

চলুন এবার সামনের দিক থেকে শো করি ।।
#box img:nth-child(1) {
-webkit-transform: rotateX(0deg) translateZ(200px);
display: none; /* temporarily hide */
}</div>
<div>

এখন আমরা আমার বক্সটা পরিপূর্ণ ভাবে দেখতে পারছি ।। 



এখন প্রথন ইমেজ থেকে display: none রিমুভ করে দি, তাহলে কোড গুলো 
#box {
position: relative;
display: block;
width: 900px;
height: 400px;
-webkit-transform: translateZ(-200px); /* Pushes 3D object back into place */
-webkit-transition: -webkit-transform 1s;  /* Enables transitions for transforms */
}
 কাজ কিন্তু শেষ।। এখন শুধু css গুলো এক জাইগাতে করতে হবে।। তার আগে ত
 অ্যানিমেশন সেট করতে হবে।।

ধাপ ৪। অ্যানিমেশন সেট

নিচের কোড গুলো সেট দিলেই অ্যানিমেশন অ্যাড হয়ে যাবে।।

#fig1:focus #box {
-webkit-transform: translateZ(-200px) rotateY(0deg);
}

#fig2:focus #box {
-webkit-transform: translateZ(-200px) rotateX(-180deg);
}

#fig3:focus #box {
-webkit-transform: translateZ(-200px) rotateX(-90deg);
}

#fig4:focus #box {
-webkit-transform: translateZ(-200px) rotateX(90deg);
}

#fig5:focus #box {
-webkit-transform: translateZ(-450px) rotateY(90deg);
}

#fig6:focus #box {
-webkit-transform: translateZ(-450px) rotateY(-90deg);
}
<pre>

ফাইনাল CSS

অনেক ত css নিয়ে কাজ করা হল, এখন আমাদের সেই সিএসএস কোড গুলোকে একত্র করতে হবে ।।

দেখেন আমি নিচে একত্র করে দিয়েছি।। শুধু কপি পেস্ট করেন।।

/* RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
:focus {
outline: 0;
}
/* HTML5 tags */
header, section, footer,
aside, nav, article {
display: block;
}

html {
width: 100%;
height: 100%;
background-color: #FFFFFF;
background-image: -moz-linear-gradient(top, #FFFFFF, #b3b3b3);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FFFFFF),color-stop(1, #b3b3b3));
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#b3b3b3');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#b3b3b3')";
}

#container {
width: 960px;
margin: 0 auto;
}

#slideshow {
width: 900px;
margin: 50px auto 0 auto;
padding: 50px 0 0 0;
-webkit-perspective: 800; /* triggers a 3D space */
}

figure {
display: inline;
-webkit-transform-style: preserve-3d; /* maintains 3D space */
}

#box {
position: relative;
display: block;
width: 900px;
height: 400px;
-webkit-transform: translateZ(-200px); /* Pushes 3D object back into place */
-webkit-transition: -webkit-transform 1s;  /* Enables transitions for transforms */
}

#box img {
position: absolute;
top: 0;
left: 0;
}

figcaption {
display: inline-block;
width: 70px;
height: 35px;
background: rgba(0,0,0,0.6);
border: 1px solid rgba(0,0,0,0.7);
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
text-align: center;
line-height: 35px;
color: #ffffff;
text-shadow: 1px 1px 1px #000000;
cursor: pointer;

position: relative;
top: -50px;
left: 150px;
margin: 0 30px 0 0;

-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
-webkit-transition: all 0.1s linear;
transition: all 0.1s linear;
}

figcaption:hover {
background: rgba(0,0,0,0.8);
}

#box img:nth-child(1) {
-webkit-transform: rotateX(0deg) translateZ(200px);
}

#box img:nth-child(2) {
-webkit-transform: rotateX(180deg) translateZ(200px);
}

#box img:nth-child(3) {
-webkit-transform: rotateX(90deg) translateZ(200px);
}

#box img:nth-child(4) {
-webkit-transform: rotateX(-90deg) translateZ(200px);
}

#box img:nth-child(5) {
-webkit-transform: rotateY(-90deg) translateZ(200px);
}

#box img:nth-child(6) {
-webkit-transform: rotateY(90deg) translateZ(700px);
}

#fig1:focus #box {
-webkit-transform: translateZ(-200px) rotateY(0deg);
}

#fig2:focus #box {
-webkit-transform: translateZ(-200px) rotateX(-180deg);
}

#fig3:focus #box {
-webkit-transform: translateZ(-200px) rotateX(-90deg);
}

#fig4:focus #box {
-webkit-transform: translateZ(-200px) rotateX(90deg);
}

#fig5:focus #box {
-webkit-transform: translateZ(-450px) rotateY(90deg);
}

#fig6:focus #box {
-webkit-transform: translateZ(-450px) rotateY(-90deg);
}
<pre>

আমার কাজ শেষ ভাই এখন যা করার আপনাকে করতে হবে ।। ভয় পায়েন না ।। করে ফেলেন স্টেপ বায় স্টেপ।।

আরেকটূ বলে দি, এখন আপনি একটি ফোল্ডার এ ৬ টি ইমেজ রাখবেন যেগুলোর স্লাইড করতে চান।।

ইমেজ গুলোর নাম হবে এমন,

face1.jpg
face2.jpg
face3.jpg
face4.jpg
face5.jpg
face6.jpg

এবার উপর থেকে html কোড গুলো নোটপ্যাড ওপেন করে কপি পেস্ট করে index.html নামে সেভ করতে হবে।।

এবার সম্পূর্ণ সিএসএস এর যে কোড দেয়া হয়েছে সেগুলো ও কপি পেস্ট করে style.css নামে সেভ করুন।। এখন সেভ হয়ে গেলে index ফাইল টা মজিলা ফায়ারফক্স এ ওপেন করেন আর দেখেন মজা।।

>>>ভাল লাগলে কমেন্ট করতে ভুলবেন না<<<

   ফেসবুক এ আমাকে পেতে নিচে ক্লিক করুন---