CSS3 გენერატორის ტრანსფორმაცია: მასშტაბირება, როტაცია, თარგმნა და გადახრა

CSS3.0 Transform

CSS Transform გენერატორი ზარმაცი ადამიანებისთვის.

დააყენეთ მასშტაბი, დაატრიალეთ, თარგმნეთ და დახრილი და უყურეთ პირდაპირ გადახედვას სასურველი ხედის მისაღებად.

მოერიდეთ უკიდურესი მნიშვნელობების დაყენებას არაჩვეულებრივი თვისებისთვის, რადგან წინასწარი გადახედვა შეიძლება ფარავდეს პარამეტრების პანელს. ამ სიტუაციაში მოგიწევთ გვერდის განახლება.

 

მასშტაბირება, როტაცია, თარგმნა და დახრილობა

მასშტაბი მუშაობს ისე, როგორც თქვენ გაადიდებთ და ამცირებთ მიზნობრივ ელემენტს. ნაგულისხმევი მასშტაბის მნიშვნელობა არის 1, რომელიც მუშაობს ორიგინალური ზომის მულტიპლიკატორად. ეს ნიშნავს, რომ 0,5 ნახევრდება, ხოლო 2 აორმაგებს მონაკვეთს.

 

დაატრიალეთ ელემენტი საათის ისრის მიმართულებით მეორე თვისებით, რომელიც მითითებულია გრადუსებში. 180°-ით შემობრუნება აქცევს ობიექტს თავდაყირა, ხოლო 360°-ით აბრუნებს თავდაპირველ ვერტიკალურ პოზიციას. დააყენეთ ნებისმიერი დადებითი ან უარყოფითი მნიშვნელობა ან თუნდაც ათწილადები.

 

Translate ცვლის ელემენტს პიქსელებით, რომლებიც დაკავშირებულია მის თავდაპირველ პოზიციასთან. X მნიშვნელობა ჰორიზონტალურად, ხოლო Y ვერტიკალურად, როდესაც ბრუნვის ატრიბუტი არის ნული.

 

გადაახვიეთ ობიექტები ჰორიზონტალურ (X) ან ვერტიკალურ (Y) ღერძზე.

 

CSS ტრანსფორმაცია განმარტებულია 

ტრანსფორმაციის CSS თვისება გაძლევთ საშუალებას შეატრიალოთ, მასშტაბირება, დახრილობა და თარგმნა ელემენტი. ის ცვლის CSS ვიზუალური ფორმატირების მოდელის კოორდინატთა სივრცეს.

განმარტება და გამოყენება

ტრანსფორმაციის თვისება იყენებს ელემენტს 2D ან 3D ტრანსფორმაციას. ეს თვისება საშუალებას გაძლევთ დაატრიალოთ, მასშტაბირება, გადაადგილება, დახრილობა და ა.შ. ელემენტები.

ბრაუზერის მხარდაჭერა

ცხრილის ნომრები მიუთითებს ბრაუზერის პირველ ვერსიას, რომელიც სრულად უჭერს მხარს ქონებას.

ნომრები, რასაც მოჰყვება -webkit-, -moz- ან -o- მიუთითებს პირველ ვერსიაზე, რომელიც მუშაობდა პრეფიქსით.

Სინტაქსი
transform: none|transform-functions|initial|inherit;