تصاویر پانورما 360 درجه با css3

s1r101 · فروردین 92

do.php?imgf=joomlaforum.ir_13659634681.jpg

با استفاده از این تکنیک تصاویر پانوراما را در سایت خود به نمایش بذارید به طوری که وقتی موس روی تصویر حرکت می کند عکس به صورت 360 درجه بچرخد. این کد فول سی اس اس بوده و نیازی به جاوا ندارد. دموی کد در زیر آمده است:

برای دیدن دمو اینجا را کلیک کنید

فایل را از انتهای پست دانلود کنید و تمامی محتوایان آن را در پوشه مورد نظر کپی کنید و تصویر دلخواه خود را با عکس پانورما 3d.jpg جایگزین کنید!

و یامیتوانید به صورت دستی به قالب خود اضافه کنید به ترتیب روش زیر:

بخش HTML کد

درون کد قالب به دنبال کد <body> بگردید و بعد از آن کد زیر را قرار دهید.

[TABLE]
[TR]
[TD="class: number"]01[/TD]
[TD="class: content"]<div class="jDesign_3d">[/TD]
[/TR]
[/TABLE]




[TABLE]
[TR]
[TD="class: number"]02[/TD]
[TD="class: content"]    <div class="jDesign"></div>[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]03[/TD]
[TD="class: content"]    <div class="jDesign"></div>[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]04[/TD]
[TD="class: content"]    <div class="jDesign"></div>[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]05[/TD]
[TD="class: content"]    <div class="jDesign"></div>[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]06[/TD]
[TD="class: content"]    <div class="jDesign"></div>[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]07[/TD]
[TD="class: content"]    <div class="jDesign"></div>[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]08[/TD]
[TD="class: content"]    <div class="jDesign"></div>[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]09[/TD]
[TD="class: content"]    <div class="jDesign"></div>[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]10[/TD]
[TD="class: content"]    <div class="jDesign"></div>[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]11[/TD]
[TD="class: content"]    <div class="jDesign"></div>[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]12[/TD]
[TD="class: content"]    <div class="jDesign"></div>[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]13[/TD]
[TD="class: content"]    <div class="jDesign"></div>[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]14[/TD]
[TD="class: content"]    <div class="jDesign"></div>[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]15[/TD]
[TD="class: content"]    <div class="jDesign"></div>[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]16[/TD]
[TD="class: content"]    <div class="jDesign"></div>[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]17[/TD]
[TD="class: content"]    <div class="jDesign"></div>[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]18[/TD]
[TD="class: content"]    <div class="jDesign"></div>[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]19[/TD]
[TD="class: content"]    <div class="jDesign"></div>[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]20[/TD]
[TD="class: content"]    <div class="jDesign"></div>[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]21[/TD]
[TD="class: content"]    <div class="jDesign"></div>[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]22[/TD]
[TD="class: content"]    <div class="jDesign"></div>[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]23[/TD]
[TD="class: content"]    <div class="jDesign"></div>[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]24[/TD]
[TD="class: content"]    <div class="jDesign"></div>[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]25[/TD]
[TD="class: content"]    <div class="jDesign"></div>[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]26[/TD]
[TD="class: content"]    <div class="jD_3d"></div>[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]27[/TD]
[TD="class: content"]</div>[/TD]
[/TR]
[/TABLE]

بخش CSS کد

درون کد قالب قبل از <head/> بین دو تگ <style> و <style/> قرار می گیرد.

[TABLE]
[TR]
[TD="class: number"]01[/TD]
[TD="class: content"].jDesign_3d {[/TD]
[/TR]
[/TABLE]




[TABLE]
[TR]
[TD="class: number"]02[/TD]
[TD="class: content"]  width: 600px;[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]03[/TD]
[TD="class: content"]  height: 400px;[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]04[/TD]
[TD="class: content"]  position: relative;[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]05[/TD]
[TD="class: content"]  overflow: hidden;[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]06[/TD]
[TD="class: content"]  border-radius:8px;[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]07[/TD]
[TD="class: content"]  -webkit-border-radius:8px;[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]08[/TD]
[TD="class: content"]  -moz-border-radius:8px[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]09[/TD]
[TD="class: content"]    }[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]10[/TD]
[TD="class: content"].jD_3d {[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]11[/TD]
[TD="class: content"]    width: 100%;[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]12[/TD]
[TD="class: content"]    height: 100%;[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]13[/TD]
[TD="class: content"]    background: url('jdesign.jpg') top left no-repeat;[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]14[/TD]
[TD="class: content"]    position: absolute;[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]15[/TD]
[TD="class: content"]    z-index: -1;[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]16[/TD]
[TD="class: content"]    top: 0;[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]17[/TD]
[TD="class: content"]    left: 0;[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]18[/TD]
[TD="class: content"]    box-shadow: inset 0 0 150px black;[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]19[/TD]
[TD="class: content"]    }[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]20[/TD]
[TD="class: content"].jDesign {[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]21[/TD]
[TD="class: content"]    height: 400px;[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]22[/TD]
[TD="class: content"]    width: 25px;[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]23[/TD]
[TD="class: content"]    float: left;[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]24[/TD]
[TD="class: content"]    }[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]25[/TD]
[TD="class: content"]    .jDesign:nth-child(2):hover ~ .jD_3d {[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]26[/TD]
[TD="class: content"]        background-position: -600px 0;[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]27[/TD]
[TD="class: content"]        }[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]28[/TD]
[TD="class: content"]    .jDesign:nth-child(3):hover ~ .jD_3d {[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]29[/TD]
[TD="class: content"]        background-position: -1200px 0;[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]30[/TD]
[TD="class: content"]        }[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]31[/TD]
[TD="class: content"]    .jDesign:nth-child(4):hover ~ .jD_3d {[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]32[/TD]
[TD="class: content"]        background-position: -1800px 0;[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]33[/TD]
[TD="class: content"]        }[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]34[/TD]
[TD="class: content"]    .jDesign:nth-child(5):hover ~ .jD_3d {[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]35[/TD]
[TD="class: content"]        background-position: -2400px 0;[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]36[/TD]
[TD="class: content"]        }[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]37[/TD]
[TD="class: content"]    .jDesign:nth-child(6):hover ~ .jD_3d {[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]38[/TD]
[TD="class: content"]        background-position: -3000px 0;[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]39[/TD]
[TD="class: content"]        }[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]40[/TD]
[TD="class: content"]    .jDesign:nth-child(7):hover ~ .jD_3d {[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]41[/TD]
[TD="class: content"]        background-position: -3600px 0;[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]42[/TD]
[TD="class: content"]        }[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]43[/TD]
[TD="class: content"]    .jDesign:nth-child(8):hover ~ .jD_3d {[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]44[/TD]
[TD="class: content"]        background-position: -4200px 0;[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]45[/TD]
[TD="class: content"]        }[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]46[/TD]
[TD="class: content"]    .jDesign:nth-child(9):hover ~ .jD_3d {[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]47[/TD]
[TD="class: content"]        background-position: -4800px 0;[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]48[/TD]
[TD="class: content"]        }[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]49[/TD]
[TD="class: content"]    .jDesign:nth-child(10):hover ~ .jD_3d {[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]50[/TD]
[TD="class: content"]        background-position: -5400px 0;[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]51[/TD]
[TD="class: content"]        }[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]52[/TD]
[TD="class: content"]    .jDesign:nth-child(11):hover ~ .jD_3d {[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]53[/TD]
[TD="class: content"]        background-position: -6000px 0;[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]54[/TD]
[TD="class: content"]        }[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]55[/TD]
[TD="class: content"]    .jDesign:nth-child(12):hover ~ .jD_3d {[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]56[/TD]
[TD="class: content"]        background-position: -6600px 0;[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]57[/TD]
[TD="class: content"]        }[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]58[/TD]
[TD="class: content"]    .jDesign:nth-child(13):hover ~ .jD_3d {[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]59[/TD]
[TD="class: content"]        background-position: -7200px 0;[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]60[/TD]
[TD="class: content"]        }[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]61[/TD]
[TD="class: content"]    .jDesign:nth-child(14):hover ~ .jD_3d {[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]62[/TD]
[TD="class: content"]        background-position: -7800px 0;[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]63[/TD]
[TD="class: content"]        }[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]64[/TD]
[TD="class: content"]    .jDesign:nth-child(15):hover ~ .jD_3d {[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]65[/TD]
[TD="class: content"]        background-position: -8400px 0;[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]66[/TD]
[TD="class: content"]        }[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]67[/TD]
[TD="class: content"]    .jDesign:nth-child(16):hover ~ .jD_3d {[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]68[/TD]
[TD="class: content"]        background-position: -9000px 0;[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]69[/TD]
[TD="class: content"]        }[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]70[/TD]
[TD="class: content"]    .jDesign:nth-child(17):hover ~ .jD_3d {[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]71[/TD]
[TD="class: content"]        background-position: -9600px 0;[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]72[/TD]
[TD="class: content"]        }[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]73[/TD]
[TD="class: content"]    .jDesign:nth-child(18):hover ~ .jD_3d {[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]74[/TD]
[TD="class: content"]        background-position: -10200px 0;[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]75[/TD]
[TD="class: content"]        }[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]76[/TD]
[TD="class: content"]    .jDesign:nth-child(19):hover ~ .jD_3d {[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]77[/TD]
[TD="class: content"]        background-position: -10800px 0;[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]78[/TD]
[TD="class: content"]        }[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]79[/TD]
[TD="class: content"]    .jDesign:nth-child(20):hover ~ .jD_3d {[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]80[/TD]
[TD="class: content"]        background-position: -11400px 0;[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]81[/TD]
[TD="class: content"]        }[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]82[/TD]
[TD="class: content"]    .jDesign:nth-child(21):hover ~ .jD_3d {[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]83[/TD]
[TD="class: content"]        background-position: -12000px 0;[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]84[/TD]
[TD="class: content"]        }[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]85[/TD]
[TD="class: content"]    .jDesign:nth-child(22):hover ~ .jD_3d {[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]86[/TD]
[TD="class: content"]        background-position: -12600px 0;[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]87[/TD]
[TD="class: content"]        }[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]88[/TD]
[TD="class: content"]    .jDesign:nth-child(23):hover ~ .jD_3d {[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]89[/TD]
[TD="class: content"]        background-position: -13200px 0;[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]90[/TD]
[TD="class: content"]        }[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]91[/TD]
[TD="class: content"]    .jDesign:nth-child(24):hover ~ .jD_3d {[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]92[/TD]
[TD="class: content"]        background-position: -13800px 0;[/TD]
[/TR]
[/TABLE]





[TABLE]
[TR]
[TD="class: number"]93[/TD]
[TD="class: content"]        }[/TD]
[/TR]
[/TABLE]

برای دانلود کد آماده+تصویر پانورما دمو اینجا را کلیک کنید

ویرایش شده در فروردین 92 توسط s1r101
*اسلایدشو آکارئونی و... برو به آخرین پست

Mohammad Moradi · فروردین 92

بسيار عالي بود

بازم ازين جديدا و نادر داري بذار.........

ورود

تصاویر پانورما 360 درجه با css3

2 پست در این موضوع

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

ایجاد یک حساب کاربری

ورود به حساب کاربری

خانه

فعالیت ها