17
jak obrócić element w odniesieniu do określonego punktu tj zdefiniowane x & y współrzędnych CSS (WebKit)?CSS obrotu względem punktu odniesienia
Zwykle obrót jest punktem środkowym elementu.
A
Odpowiedz
44
Można użyć transformacji pochodzenia. Definiuje punkt do obracania się od lewego górnego rogu elementu.
transform-origin: 0% 0%
Obróciłby się w lewym górnym rogu.
Dla innych opcji zajrzeć tutaj: https://developer.mozilla.org/En/CSS/-moz-transform-origin
O ile wiem, nie jest opcją, aby obracać się wokół stałego punktu (choć będzie to poręczny).
1
Jeśli potrzebujesz określonego przesunięcia, jednym ze sposobów jest edycja obrazu, aby go powiększyć, tak aby środek znajdował się pośrodku obrazu. Możesz umieścić to w DIV z "overflow: none" i ustawić go względem względnego pozycjonowania. Element div maskuje obszar obrazu, którego nie chcesz wyświetlać.
Powiązane problemy
- 1. Wykrywanie osi obrotu z punktu obrotu
- 2. Jednoetapowa transformacja afiniczna do obrotu wokół punktu?
- 3. Kierunek obrotu w animacji CSS \ Transformacja
- 4. Znacznik neutralny względem układu dla CSS?
- 5. Umieść jeden element względem drugiego w CSS
- 6. Wykrywanie przezroczystego proxy względem rzeczywistego odniesienia do obiektu?
- 7. Punkt obrotu w prostokącie
- 8. Zmienione względem zmiennych zmiennych pod względem przechwytywania
- 9. Uzyskiwanie dostępu do poprzedniego punktu odniesienia w połączeniu
- 10. ASP.NET - ścieżka do użycia w celu odniesienia .CSS i .JS
- 11. Macierz obrotu o dowolnym punkcie
- 12. CSS3 Transition zachowuje resetowanie obrotu
- 13. Kendo UI Wykresy słupkowe Wykresy obrotu
- 14. Jaka jest matematyka pod względem rozmiaru tła CSS: cover
- 15. django-compressor: obrazy CSS ze ścieżką względem folderu
- 16. OpenGL kwaterniony obrotu matryca
- 17. CALayer z animacją obrotu
- 18. Animacja obrotu kostki czwartorzędowej
- 19. Używanie czujnika wektora obrotu
- 20. Obracanie punktu wokół innego punktu
- 21. jak napisać css dla określonego punktu przerwania w kanciastym materiale
- 22. Jak mogę obrócić widok UIImageView względem dowolnego punktu (innego niż jego środek)?
- 23. Skala przejściowa względem obiektu nadrzędnego
- 24. Przypisanie do niestanowiącego odniesienia odniesienia
- 25. W jaki sposób .NET rozróżnia typy odniesienia względem typów pierwotnych i wartościowych:
- 26. Składnik obrotu kwaternionowego wokół osi
- 27. Naprawiono pozycję względem elementu nadrzędnego
- 28. Zasób odniesienia w javascript
- 29. Polilinia Android - Dodawanie punktu według punktu
- 30. Obracanie punktu wokół punktu za pomocą OpenCV
To niesamowite, nie miałem pojęcia, że to zostało wprowadzone w życie :) – Kyle
Do przeglądarki opartej na webkitach potrzebny może być prefiks: '-webkit-transform-origin: 0% 0%' – Murilo