`

CSS3中transform中的matrix()矩阵笔录

    博客分类:
  • CSS
CSS 
阅读更多

【引言】

transform:matrix(0.866,0.5,-0.5,0.866,0,0);

transform: rotate(30deg);

上面两句是等效的,这与线性代数有关

关于线性代数可以参考

http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/

 

matrix(a,b,c,d,e,f) 的参数拆成矩阵就是这样的

a c e 
b d f
0 0 1

旋转z轴θ度
x轴最后会与原点偏移,X轴上的点[x,0,0]的坐标都会变成 [cosθx,sinθx,0]

          a c e 
[1,0,0] * b d f = [cosθ,sinθ,0]
          0 0 1

y轴

          a c e 
[0,1,0] * b d f = [-sinθ,cosθ,0]
          0 0 1

z轴 没有动

          a c e 
[0,0,1] * b d f = [0,0,1]
          0 0 1

这样就可以反推矩阵的个个值

分享到:
评论

相关推荐

    css3属性transform制作圆盘导航菜单代码

    css3属性transform制作圆盘导航菜单代码 css3属性transform制作圆盘导航菜单代码 css3属性transform制作圆盘导航菜单代码 css3属性transform制作圆盘导航菜单代码

    CSS3 transform图片飞入动画特效

    在现代网页设计中,CSS3已经成为了一种强大的工具,提供了许多新颖且丰富的功能,其中之一就是transform属性。"CSS3 transform图片飞入动画特效"是一种利用transform属性实现的动态视觉效果,它能让网页元素(比如...

    纯css3 transform制作带指针偏移Safari指南针动

    在CSS3中,`transform`接受多个变换函数,这些函数可以组合使用,形成复杂的变换效果。对于指南针动画,我们主要关注`rotate()`函数,它可以指定元素绕其原点旋转的角度。 创建指南针的基本结构通常包含一个背景...

    CSS3中transform属性的详解.docx

    在CSS3中,`transform`属性是一个强大的工具,它允许开发者对网页元素进行二维或三维的变形操作,如旋转、平移、缩放和倾斜等。这个属性极大地扩展了Web设计的视觉表现力,同时也提高了用户体验。以下是对`transform...

    纯css3 transform文字变形3D阴影效果代码

    在本主题中,我们将深入探讨如何使用CSS3的`transform`属性来实现文字的3D变形和阴影效果。`transform`属性允许我们对元素进行旋转、缩放、移动和倾斜等变换,从而创造出丰富的视觉效果。 首先,让我们理解`...

    css3 transform 14种侧边栏导航的隐藏和显示动画效果

    在本文中,我们将深入探讨如何使用CSS3的`transform`属性来实现14种不同的侧边栏导航隐藏和显示的动画效果。这些效果对于优化移动设备和其他小屏幕设备的用户体验至关重要,因为它们允许用户轻松地访问和隐藏导航...

    tween-css-transform:补间 CSS 转换 (matrix3d)

    使用 CSS matrix3d()和 4x4 矩阵插值(分解/重组)对 DOM 元素进行matrix3d() 。 这允许平滑范围的 3D 旋转(使用四元数和球面插值)而无需万向节锁定。 通常与或。 例子: var tweenr = require ( 'tweenr' ) ...

    div css3 hover transform属性5种鼠标悬停

    在网页设计中,CSS3(层叠样式表第三版)为开发者提供了许多强大的功能,其中transform属性和:hover伪类是两个关键元素,用于创建动态效果和交互性。本篇文章将详细探讨如何结合这两个特性,实现div元素在鼠标悬停时...

    10种纯CSS3 transform鼠标悬停到图片上过渡动画显示

    在本文中,我们将深入探讨如何使用CSS3的`transform`属性来实现鼠标悬停时的图片过渡动画效果。CSS3的`transform`属性是Web设计领域的一个强大工具,它允许我们对元素进行旋转、缩放、平移和倾斜等操作,从而创造出...

    CSS3+Transform

    实现针对于Webkit(Google Chrome,Safari)、Moz(Firefox)以及Opera浏览器的一些变换效果,包括旋转、倾斜、缩放、位移效果。

    使用CSS3的transform 属性实现带前后按钮3D立体旋转木马特效源码.zip

    在本案例中,“使用CSS3的transform属性实现带前后按钮3D立体旋转木马特效源码.zip”是一个展示如何利用`transform`属性创建3D旋转木马效果的项目。 首先,我们来理解`transform`属性的基本用法。`transform`允许...

    纯css3基于transform实现的弹簧动画特效源码.zip

    在本资源“纯css3基于transform实现的弹簧动画特效源码.zip”中,我们将探讨如何利用CSS3的transform属性来创建具有弹簧效果的动画。这种效果通常用于模拟真实世界中的物理运动,如弹性物体的振动,可以为用户界面...

    纯css3 transform旋转属性创建立体纹理文字特效

    在本文中,我们将深入探讨如何使用CSS3的`transform`属性中的旋转功能来创建立体纹理文字特效。CSS3是 Cascading Style Sheets(层叠样式表)的第三个主要版本,它引入了许多新特性,大大增强了网页设计的灵活性和...

    css3 transform属性制作完美带阴影效果的3d旋转电影

    在本文中,我们将深入探讨如何使用CSS3的`transform`属性来创建一个具有精美阴影效果的3D旋转电影海报。CSS3是层叠样式表(Cascading Style Sheets)的第三个版本,它引入了许多强大的功能,如动画、变换和过渡,使...

    纯css3 transform制作弹簧动画特效

    在本文中,我们将深入探讨如何使用CSS3的`transform`属性来创建弹簧动画特效。CSS3作为现代网页设计的关键技术之一,提供了丰富的样式和动画功能,使得开发者无需依赖JavaScript即可实现复杂的动态效果。 首先,...

    jquery css3 transform属性实现电子钟表走动代

    在IT领域,jQuery、CSS3和transform属性是前端开发中不可或缺的部分。本篇文章将深入探讨如何利用这些技术来实现一个动态的电子钟表效果。 首先,jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画...

    css3 transform属性利用伪元素制作字母卡片开关门

    CSS3的transform属性是现代网页设计中的一个重要工具,它允许我们对元素进行二维或三维的变换操作,如旋转、缩放、平移和倾斜等,从而创造出丰富的动态视觉效果。在本示例中,"css3 transform属性利用伪元素制作字母...

    Arctext弧形文字效果插件(CSS3&jQuery)

    在本案例中,Arctext插件利用CSS3的transform属性来实现文字的变形,尤其是旋转和平移,使得文字能够沿着预设的弧线路径排列。同时,通过CSS3的animation属性,可以控制文字动画的播放速度、方向和次数,创造出流畅...

    css3 transform打造2款超炫丽环状导航菜单动画效果

    首先,我们要了解`transform`属性是CSS3中的一个关键特性,它可以对元素进行二维或三维的变换,如旋转、缩放、移动和平移等。在本例中,我们将主要用到`rotate`和`scale`两个变换函数,来实现菜单项的展开和旋转效果...

    CSS3 transform图标加载代码.zip

    在现代网页设计中,CSS3的`transform`属性是一个强大的工具,它允许开发者对元素进行二维或三维的变换,如旋转、缩放、平移和倾斜。本项目"CSS3 transform图标加载代码"将深入探讨如何利用这个特性来创建动态的图标...

Global site tag (gtag.js) - Google Analytics