Transforms در طراحی سایت در معنای ایجاد چرخش می باشد. که در این صورت رشته کدهایی مورد استفاده قرار می گیرد که هر قابلیت خاصی را به طراحی وب سایت شما اهدا می نماید که به واسط آن زیبایی را به صفحه طراحی وب سایت شما می بخشد. حال بدین منظور با درج نمودن کدهایی که در ادامه به آن اشاره خواهد شد می توانید عکس ها و نیز div هایی خاص از طراحی وب سایت خود را بچرخانید و یا در جهت گیری خاص قرار دهید که خود موجب جلب توجه و نظر کاربران سایت می شود و در نتیجه عمل بهبود در وضعیت سئو سایت و بهینه سازی سایت را خواهیم داشت.
translate()
rotate()
scale()
skewX()
skewY()
matrix()
کدهای بالا مواردی است که هر یک چرخش و جهت گیی خاص را در اجزای صفحه و نیز تصاویر موجود در صفحه طراحی وب سایت ایجاد می نمایند. مثالی از استفاده از این کد در صفحه طراحی سایت را به صورت زیر خواهیم داشت.
Transform در کد طراحی سایت
Transform موجب انتقال بخش خاصی از طراحی وب سایت شما در اندازه تعیین شده به سمت دیگر خواهد شد.
div {
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari */
transform: translate(50px,100px);
}
در کد بالا چرخش را در ابعاد مشخص شده و به صورت پیکسی معین نموده است که هر یک در تناسب با مرورگر خاص می باشد. کد rotate نیز موجب چرخش در جهت خاص می شود که در ادامه مثالی از ایجاد جرخش در صفحه طراحی وب سایت را بیان می نماییم.
div {
-ms-transform: rotate(20deg); /* IE 9 */
-webkit-transform: rotate(20deg); /* Safari */
transform: rotate(20deg);
}
در کد بالا میزانی که می باشد div به چرخش درآید را تعیین نموده است و برای آن درجه خاص را تعیین نموده است. تمامی این المان ها موجب نمایش زیبا از طراحی وب سایت شما خواهد شد که تاثیرگذاری مثبت را در سئو وب سایت و بهینه سازی وب سایت شما خواهد داشت.
