یک روش بسیار ساده برای چرخش عناصر یک صفحه وب سایت - فقط چند سبک css را اعمال کنید. آشنایی با این درس به شما این امکان را می دهد که یک فن کارت باز نشده ، برگهای ریخته یا عکس های شیک را در یک آلبوم در صفحه قرار دهید. این درس شامل نمونه ای از اجرای آلبوم عکس است و راه حل را برای همه مرورگرهای مدرن در نظر می گیرد.
لازم است
چهار عکس با حداکثر 450 پیکسل عرض؛
دستورالعمل ها
مرحله 1
این مثال بر ایجاد یک صفحه آلبوم شیک با عکس های چرخان متمرکز است.
من تصاویر پیش فرض (عرض 400 پیکسل) را با آدرس ها آماده کردم:
در آینده ، شناسه ها را با توجه به نام آنها به تصاویر اختصاص می دهیم.
گام 2
ابتدا بلوکی برای آلبوم عکس خود با استفاده از برچسب div آماده خواهیم کرد و همچنین عکسها را با استفاده از برچسب img به آن اضافه خواهیم کرد (هر تصویر باید در برچسب div خودش محصور شود) ، مانند این:
لطفا توجه داشته باشید که ما یک شناسه به بلوک اختصاص داده ایم -. توسط شناسه ، می توانیم با استفاده از css به بلوک مراجعه کنیم.
مرحله 3
بعد ، باید سبک های css را روی بلوک تنظیم کنید. لیست سبک ها: "موقعیت: نسبی؛" - مبدا را از گوشه بالا سمت چپ بلوک ما تنظیم می کند. "margin: 50px auto؛" تورفتگی بلوک ما "50px" را در بالا و زیر بقیه محتوای صفحه تنظیم می کند ، همچنین تورفتگی اتوماتیک را در سمت راست و چپ تنظیم می کند ، بنابراین بلوک ما را در مرکز تراز می کند. "عرض: 900 پیکسل؛ ارتفاع: 650 پیکسل؛" - عرض را به ترتیب 900px و ارتفاع را 650px تنظیم می کند.
لیست مشخص شده از سبک ها باید به این ترتیب قرار داده شود:
# عکس_صفحه {
موقعیت: نسبی؛
حاشیه: 0 خودکار؛
عرض: 900 پیکسل
ارتفاع: 650px؛
text-align: مرکز؛
}
به استفاده از "# عکس_ صفحه" توجه داشته باشید - اینگونه است که ما به شناسه بلوک مراجعه می کنیم.
مرحله 4
اکنون برای هر تصویر در داخل بلوک photo_page سبک های کلی اختصاص می دهیم. اینها گوشه های گرد ، حاشیه خاکستری ، پس زمینه سفید ، بالشتک و سایه انداز هستند.
این یک اثر عکاسی ایجاد می کند:
# عکس_صفحه img {
شعاع مرز: 7px؛
حاشیه: 1px خاکستری جامد ؛
زمینه: #ffffff؛
بالشتک: 10px؛
box-shadow: 2 پیکسل 2 پیکسل 10 پیکسل # 697898؛
}
به استفاده از "#photo_page img" توجه داشته باشید - این مربوط به تمام تصاویر داخل بلوک صفحه عکس است
مرحله 5
همچنین اضافه کردن یک سبک کوتاه مانند این مهم است:
# عکس_بخش div {
شناور به سمت چپ؛
}
همه بلوک های داخل بلوک عکس_ صفحه را در سمت چپ کوچک می کند.
مرحله 6
مرحله میانی درس اکنون به پایان رسیده است. اگر کار شما مشابه تصویر موجود در تصویر است ، اشتباه نکرده اید و می توانید به مرحله بعدی بروید.
مرحله 7
اکنون ما می چرخیم تا عکس های ارسال شده را بچرخانیم. برای این کار ما به سبک تبدیل نیاز داریم. در حال حاضر ، به شکل خالص ، استفاده نمی شود ، بلکه فقط با یک پیشوند برای هر مرورگر در ابتدا است ، مانند این:
-webkit-transform: چرخش (مقدار) ؛
-moz-transform: چرخش (مقدار)؛
-o-transform: چرخش (مقدار)؛
این سبک چرخش برای مرورگرها است: Google Chrome ، Mazilla ، Opera (به ترتیب). به جای کلمه "مقدار" ، یک عدد را با deg در انتها وارد می کنیم ، مانند این:
90deg - 90 درجه در جهت عقربه های ساعت بچرخید.
-5 درجه - چرخش -5 درجه در خلاف جهت عقربه های ساعت.
و غیره.
مرحله 8
سبک عکس عکس_1:
# عکس_1 {
-webkit-transform: چرخش (5deg) ؛
-moz-transform: چرخش (5deg) ؛
-o-transform: چرخش (5deg) ؛
}
تصویر اول 5 درجه چرخانده می شود.
مرحله 9
سبک عکس عکس_2:
# عکس_2 {
-webkit-transform: چرخش (-3deg) ؛
-moz-transform: چرخش (-3deg) ؛
-o-transform: چرخش (-3deg) ؛
}
تصویر دوم -3 درجه چرخانده می شود.
مرحله 10
سبک عکس عکس 3:
# عکس_3 {
-webkit-transform: چرخش (-2 درجه) ؛
-moz-transform: چرخش (-2deg) ؛
-o-transform: چرخش (-2deg) ؛
}
تصویر سوم -2 درجه چرخانده می شود.
مرحله 11
سبک عکس عکس 4:
# عکس_4 {
-webkit-transform: چرخش (8deg) ؛
-moz-transform: چرخش (8deg) ؛
-o-transform: چرخش (8deg) ؛
}
تصویر چهارم 8 درجه چرخانده می شود.
مرحله 12
بیایید ببینیم که چگونه می توانید موقعیت تصاویر را اصلاح کنید. به عنوان مثال ، شما می خواهید اولین تصویر 20px را از بالا و 10px را از سمت چپ جبران کنید. در این حالت ، شما باید از سبک حاشیه استفاده کنید. در اینجا روش صحیح استفاده از آن برای پرونده ما وجود دارد:
# عکس_1 {
حاشیه: 20px -10px -20px 10px؛
-webkit-transform: چرخش (5deg) ؛
-moz-transform: چرخش (5deg) ؛
-o-transform: چرخش (5deg) ؛
}
لطفا توجه داشته باشید که اولین مقدار سبک حاشیه بالایی است. دوم فرورفتگی به سمت راست است. سوم یک تورفتگی از پایین است. چهارم - تورفتگی سمت چپ.
مهم: در مورد ما ، حاشیه پایین برابر است با مقدار منفی حاشیه بالا.اگر در زیر تصویر صفحه خود فضای سفید مشاهده کردید ، سعی کنید حتی پایین تر تصویر را منفی تر کنید.
مرحله 13
کار کامل است ، من یک عکس از صفحه (با در نظر گرفتن تغییر در تورفتگی تصویر اول توصیف شده در مرحله 12) ارائه می دهم.
به هر تصویری که مناسب شما نباشد سبک دندانه اضافه کنید.
