مثال
تدوير <div> العنصر:
div
{
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
}
انها محاولة لنفسك » تعريف واستخدام
وتحويل الملكية تنطبق تحول 2D أو 3D إلى عنصر. هذه الخاصية تسمح لك لتدوير، والحجم، تحرك، الانحراف، وما إلى ذلك، العناصر.
إلى فهم أفضل للممتلكات تحويل، عرض تجريبي .
| القيمة الافتراضية: | none |
|---|---|
| وارث: | no |
| Animatable: | yes. Read about animatable Try it |
| الإصدار: | CSS3 |
| جافا سكريبت بناء الجملة: | object .style.transform="rotate(7deg)" Try it |
دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل العقار.
أرقام تليها -webkit-، -moz-، أو -o- تحدد النسخة الأولى التي عملت مع بادئة.
| خاصية | |||||
|---|---|---|---|---|---|
| transform (2D) | 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 (3D) | 36.0 12.0 -webkit- | 12.0 | 10.0 | 16.0 10.0 -moz- | تسعة 4.0 -webkit- |
بناء الجملة
transform: none|transform-functions|initial|inherit;قيم الملكية
| القيمة | وصف | العبها |
|---|---|---|
| none | يعرف أنه ينبغي أن يكون هناك أي تحول | العبها " |
| matrix( n,n,n,n,n,n ) | تعرف تحولا 2D، وذلك باستخدام مصفوفة من القيم الست | العبها " |
| matrix3d ( n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n ) | تعرف تحولا 3D، وذلك باستخدام مصفوفة 4X4 من قيم 16 | |
| translate( x,y ) | تعرف ترجمة 2D | العبها " |
| translate3d( x,y,z ) | تعرف ترجمة 3D | |
| translateX( x ) | يعرف الترجمة، فقط باستخدام قيمة للمحور X | العبها " |
| translateY( y ) | يعرف الترجمة، فقط باستخدام قيمة للالعمودي | العبها " |
| translateZ( z ) | تعرف ترجمة 3D، وذلك باستخدام فقط قيمة لمحور Z | |
| scale( x,y ) | يحدد التحول على نطاق 2D | العبها " |
| scale3d( x,y,z ) | يحدد التحول على نطاق 3D | |
| scaleX( x ) | يحدد التحول على نطاق بإعطاء قيمة لمحور X | العبها " |
| scaleY( y ) | يحدد التحول على نطاق عن طريق إعطاء قيمة للالعمودي | العبها " |
| scaleZ( z ) | يحدد التحول على نطاق 3D عن طريق إعطاء قيمة للمحور Z | |
| rotate( angle ) | يعرف دوران 2D، يتم تحديد زاوية في المعلمة | العبها " |
| rotate3d( x,y,z,angle ) | يعرف دوران 3D | |
| rotateX( angle ) | يعرف دوران 3D على طول محور X | العبها " |
| rotateY( angle ) | يعرف دوران 3D على طول المحور Y | العبها " |
| rotateZ( angle ) | يعرف دوران 3D على طول المحور Z | العبها " |
| skew( x-angle,y-angle ) | تعرف تحولا الانحراف 2D على طول X- والعمودي | العبها " |
| skewX( angle ) | تعرف تحولا الانحراف 2D على طول محور X | العبها " |
| skewY( angle ) | تعرف تحولا الانحراف 2D على طول المحور Y | العبها " |
| perspective( n ) | تعرف وجهة نظر منظور لعنصر 3D تحويل | |
| initial | تحدد هذه الخاصية إلى قيمته الافتراضية. قرأت عن الأولي | |
| inherit | يرث هذه الخاصية من عنصر الأم. قراءة حول وراثة |
مزيد من الأمثلة
صور القيت على الطاولة
يوضح هذا المثال كيفية إنشاء "polaroid" الصور وتدوير الصور.
صفحات ذات صلة
درس CSS: CSS 2D التحويلات
درس CSS: CSS 3D التحويلات
HTML DOM إشارة: transform property