مثال
تعيين وضع قاعدة عنصر استدارة في:
div
{
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin: 20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
-webkit-transform-origin: 20% 40%; /* Chrome, Safari, Opera */
transform: rotate(45deg);
transform-origin: 20% 40%;
}
انها محاولة لنفسك » تعريف واستخدام
الخاصية تحويل الأصل يسمح لك لتغيير الموقف من عناصر تحويلها.
يمكن التحولات 2D تغيير X- ومحور y عنصر. يمكن التحولات 3D أيضا تغيير ض محور عنصر.
إلى فهم أفضل للممتلكات تحويل الأصل، عرض تجريبي .
Note: يجب استخدام هذه الخاصية مع تحويل الملكية.
Tip: لفهم أفضل لهذه الخاصية ليحول 3D، عرض تجريبي .
| القيمة الافتراضية: | 50% 50% 0 |
|---|---|
| وارث: | no |
| Animatable: | yes. Read about animatable Try it |
| الإصدار: | CSS3 |
| جافا سكريبت بناء الجملة: | object .style.transformOrigin="0 0" Try it |
دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل العقار.
أرقام تليها -webkit-، -moz-، أو -o- تحدد النسخة الأولى التي عملت مع بادئة.
| خاصية | |||||
|---|---|---|---|---|---|
| transform-origin (two-value syntax) | 36.0 4.0 -webkit- | 10.0 9.0 -ms- | 16.0 3.5 -moz- | تسعة 3.2 -webkit- | 23.0 15.0 -webkit- 10.5 -o- |
| transform-origin (three-value syntax) | 36.0 12.0 -webkit- | 10.0 | 16.0 10.0 -moz- | تسعة 4.0 -webkit- | 23.0 15.0 -webkit- |
CSS بناء الجملة
transform-origin:x-axis y-axis z-axis|initial|inherit;قيم الملكية
| قيمة الممتلكات | وصف |
|---|---|
| x-axis | يحدد حيث يتم وضع عرض على محور س. القيم الممكنة:
|
| y-axis | يحدد حيث يتم وضع عرض على المحور الصادي. القيم الممكنة:
|
| z-axis | يحدد حيث يتم وضع عرض في المحور Z (for 3D transformations) . القيم الممكنة:
|
| مبدئي | تحدد هذه الخاصية إلى قيمته الافتراضية. قرأت عن الأولي |
| يرث | يرث هذه الخاصية من عنصر الأم. قراءة حول وراثة |
صفحات ذات صلة
درس CSS: CSS 2D التحويلات
درس CSS: CSS 3D التحويلات
HTML DOM المرجع transformOrigin property