cari
Rumahhujung hadapan webhtml tutorial简单粗暴的解释css3中的transform属性_html/css_WEB-ITnose

          事先说明,本文范畴尚限制在2D的transform中。

       对于css3的transform属性,真是爱不释手,有了这个特性,各种特效轻松搞定。引用一句歌词“旋转,跳跃,我不停歇”。transform就是这么时尚,就是这么任性。当然他任性的地方不只是在功能方面,还有在使用方面。我们看一下W3C官网中关于transform 2D的使用介绍。

      看着有点多,首先先来分类一下:一个matrix,三个translate,三个scale,三个skew,一个rotate。而三个translate中又分为针对于XY,X,Y三样。对于这几个操作之间的关系,我画了一张图来粗暴的展现。


     看到这也许有人疑惑为什么matrix会在其他所有操作的最顶端,其实除了matrix的其他操作都是属于对matrix的一个拓展,什么意思呢?translate、scale、skew和rotate这几个操作都是拿出来给不懂matrix原理的人用的,怕你不懂原理,所以封装了几个方法出来,让你便捷的使用matrix方法。何以证明?有兴趣的童鞋可以去查看该元素的样式(注:不是class规则,是计算后的样式),或者输出该元素的transform属性。看看是不是得到都是统一的matrix的结果,类似于:

matrix(1, 0.466307658154999, 0, 1, 0, 0)

     不罗嗦了,既然这是个操作最终都是归于matrix,那么他们之间的关系是什么呢?如果我用矩阵的知识告诉大家是如何计算的,就不符合本文的标题了,而且这类文章已经有很多了,我也就不献丑了,还是坚持标题的原则:简单粗暴的解释。

       首先说translate,翻译过来就是“转移”。首先解释一下translate的语法:

transform:translate(25px,26px)

,意思是向右向下各位移25像素和26像素,然后我们转换为matrix的语法来看这行语句:

transform: matrix(1, 0, 0, 1, 25, 26);
        眼尖的童鞋应该已经发现问题了,最后的25和26就代表了X轴和Y轴的位移有兴趣的童鞋可以自己去尝试分别的X位移和Y位移,这里不拿来占篇幅了,当然这里还要强调一下transform的初始值,也就是没有任何转换的时候matrix的默认值是:transform: matrix(1, 0, 0, 1, 0, 0);,以免下面的解释大家看不懂。

        然后再就是scale,我习惯翻译成“缩放”,这样翻译也是对应于他的功能:缩放组件。演示一下语法:

transform:scale(1.1,1.2);
       同样我们看一下转换成matrix格式的语句:

  transform: matrix(1.1, 0, 0, 1.2, 0, 0);
       显而易见,这里的X的缩放和Y轴的缩放分别对应matrix中的第一个值和第四个值,他们的值对应的所表达的意思是放大多少倍。还是一样,针对于X轴和Y轴的单独测试就不做了。

       我们再来看看skew,我给翻译成“倾斜”,skew的功能就是让组件倾斜一定的角度,可以用来画平行四边形,向之前有见过“带惯性运动”的就是通过这个实现的,演示Skew用单个来演示比较靠谱

transform: skewX(45deg);transform: skewY(45deg);
       对应matrix格式的语句是:

  transform: matrix(1, 0, 1, 1, 0, 0);  transform: matrix(1, 1, 0, 1, 0, 0);
      发现问题了吗?X向倾斜对应的是改变第三个值,Y向倾斜对应的是改变第2个值,然后我来解释一下这个值的意思,这个值就是需要偏转的角度的tan值,需要旋转45°角,对应的就是1了,有兴趣可以试试其他值来验证。

     到此,我们就了解了matrix的六个值分别代表的意义:

     第一个元素:X轴放大倍数

     第二个元素:Y向倾斜角度的tan值

     第三个元素:X向倾斜角度的tan值

     第四个元素:Y轴放大的备注

     第五个元素:向右偏移的像素大小

     第六个元素:向下偏移的像素大小。

     说到这里还不算完,还有一个ratate没有解释,在解释之前先看一个插图:


       这两幅图看起来效果差不多是吗?确实差不多,不过不同的地方在于上面的图是通过rotate实现的,而下面的图是通过skew实现的,就是旋转45度角了,分别拿两个生成后的样式来看:

  transform: matrix(0.707106781186548, 0.707106781186548, -0.707106781186548, 0.707106781186548, 0, 0);   transform: matrix(1, 0.466307658154999, 0.466307658154999, 1, 0, 0);

         看到这,很多人的疑问就出来了,这一堆小数点分别是什么?上面的0.7指的是 根号2 分之一,也就是cos45°或者sin45°,那么这两种计算方式究竟是怎么回事呢?这得回到matrix实现的原理上去解释,我简单的说下transform的原理:首先寻找一个中心点(默认是最中间),然后计算每个像素相对于该点的坐标(100*100的左上角就是-50,50),然后获取matrix传入的六个值和0,0,1组成一个新的矩阵,再和原坐标组成的矩阵进行运算得到一个新的矩阵,然后再在新的矩阵中获取新的X坐标和新的Y坐标。

         好吧,说成这样已经不简单了,有点偏离我的标题,还是简单粗暴来解释了,上面matrix替换为:(a,b,c,d,e,f)六个值,然后根据中心点计算每个像素的相对坐标,然后计算新的坐标,新坐标的计算公式为:

x' = a * x + c * y + e;  y' = b * x + d * y + f;在rotate的时候传入的分别是cosθ,sinθ,sinθ和cosθ,而skew传入的值则是:cosθ/consθ , sinθ/cosθ , sinθ/cosθ , cosθ/cosθ。所以这也是为什么在使用skew进行旋转的时候图像会放大了根号2倍。

        其实正常情况下,使用前面说的六种计算方式来使用matrix公式就够用了本文最后面这部分仅是为了文章的完整性而写,却反倒失去了简单粗暴的原则。

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
HTML: Struktur, CSS: Gaya, JavaScript: Tingkah LakuHTML: Struktur, CSS: Gaya, JavaScript: Tingkah LakuApr 18, 2025 am 12:09 AM

Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: 1. HTML mentakrifkan struktur laman web, 2. CSS mengawal gaya laman web, dan 3. JavaScript menambah tingkah laku dinamik. Bersama -sama, mereka membina kerangka, estetika dan interaktiviti laman web moden.

Masa Depan HTML: Evolusi dan Trend dalam Reka Bentuk WebMasa Depan HTML: Evolusi dan Trend dalam Reka Bentuk WebApr 17, 2025 am 12:12 AM

Masa depan HTML penuh dengan kemungkinan yang tidak terhingga. 1) Ciri -ciri dan piawaian baru akan merangkumi lebih banyak tag semantik dan populariti komponen web. 2) Trend reka bentuk web akan terus berkembang ke arah reka bentuk yang responsif dan boleh diakses. 3) Pengoptimuman prestasi akan meningkatkan pengalaman pengguna melalui pemuatan imej yang responsif dan teknologi pemuatan malas.

HTML vs CSS vs JavaScript: Gambaran Keseluruhan PerbandinganHTML vs CSS vs JavaScript: Gambaran Keseluruhan PerbandinganApr 16, 2025 am 12:04 AM

Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: HTML bertanggungjawab untuk struktur kandungan, CSS bertanggungjawab untuk gaya, dan JavaScript bertanggungjawab untuk tingkah laku dinamik. 1. HTML mentakrifkan struktur laman web dan kandungan melalui tag untuk memastikan semantik. 2. CSS mengawal gaya laman web melalui pemilih dan atribut untuk menjadikannya cantik dan mudah dibaca. 3. JavaScript mengawal tingkah laku laman web melalui skrip untuk mencapai fungsi dinamik dan interaktif.

HTML: Adakah bahasa pengaturcaraan atau yang lain?HTML: Adakah bahasa pengaturcaraan atau yang lain?Apr 15, 2025 am 12:13 AM

Htmlisnotaprogramminglanguage; itisamarkuplanguage.1) htmlstructuresandformatswebcontentusingtags.2) itworkswithcssforstylingandjavascriptforinteractivity, meningkatkan pembangunan semula.

HTML: Membina struktur laman webHTML: Membina struktur laman webApr 14, 2025 am 12:14 AM

HTML adalah asas struktur laman web bangunan. 1. HTML mentakrifkan struktur kandungan dan semantik, dan penggunaan, dan sebagainya. 2. Menyediakan penanda semantik, seperti, dan sebagainya, untuk meningkatkan kesan SEO. 3. Untuk merealisasikan interaksi pengguna melalui tag, perhatikan pengesahan bentuk. 4. Gunakan elemen lanjutan seperti, digabungkan dengan JavaScript untuk mencapai kesan dinamik. 5. Kesilapan biasa termasuk label yang tidak terkawal dan nilai atribut yang tidak disebutkan, dan alat pengesahan diperlukan. 6. Strategi pengoptimuman termasuk mengurangkan permintaan HTTP, memampatkan HTML, menggunakan tag semantik, dll.

Dari teks ke laman web: Kekuatan HTMLDari teks ke laman web: Kekuatan HTMLApr 13, 2025 am 12:07 AM

HTML adalah bahasa yang digunakan untuk membina laman web, menentukan struktur laman web dan kandungan melalui tag dan atribut. 1) HTML menganjurkan struktur dokumen melalui tag, seperti,. 2) Penyemak imbas menghancurkan HTML untuk membina DOM dan menjadikan laman web. 3) Ciri -ciri baru HTML5, seperti, meningkatkan fungsi multimedia. 4) Kesilapan biasa termasuk label yang tidak terkawal dan nilai atribut yang tidak disebutkan. 5) Cadangan pengoptimuman termasuk menggunakan tag semantik dan mengurangkan saiz fail.

Memahami HTML, CSS, dan JavaScript: Panduan PemulaMemahami HTML, CSS, dan JavaScript: Panduan PemulaApr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.

Peranan HTML: Penstrukturan Kandungan WebPeranan HTML: Penstrukturan Kandungan WebApr 11, 2025 am 12:12 AM

Peranan HTML adalah untuk menentukan struktur dan kandungan laman web melalui tag dan atribut. 1. HTML menganjurkan kandungan melalui tag seperti, menjadikannya mudah dibaca dan difahami. 2. Gunakan tag semantik seperti, dan lain -lain untuk meningkatkan kebolehcapaian dan SEO. 3. Mengoptimumkan kod HTML boleh meningkatkan kelajuan pemuatan laman web dan pengalaman pengguna.

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌
Akan R.E.P.O. Ada Crossplay?
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

VSCode Windows 64-bit Muat Turun

VSCode Windows 64-bit Muat Turun

Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft

MantisBT

MantisBT

Mantis ialah alat pengesan kecacatan berasaskan web yang mudah digunakan yang direka untuk membantu dalam pengesanan kecacatan produk. Ia memerlukan PHP, MySQL dan pelayan web. Lihat perkhidmatan demo dan pengehosan kami.

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver Mac版

Dreamweaver Mac版

Alat pembangunan web visual

MinGW - GNU Minimalis untuk Windows

MinGW - GNU Minimalis untuk Windows

Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.