`

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 3D transform变换,不过如此!.mhtml

    CSS3 3D transform变换,不过如此!.mhtmlCSS3 3D transform变换,不过如此!.mhtmlCSS3 3D transform变换,不过如此!.mhtmlCSS3 3D transform变换,不过如此!.mhtmlCSS3 3D transform变换,不过如此!.mhtmlCSS3 ...

    CSS3 transform实现图片旋转木马3D

    在本文中,我们将深入探讨如何使用CSS3的`transform`属性来实现一个令人惊叹的3D图片旋转木马效果。CSS3的`transform`特性为Web开发者提供了强大的能力,可以对元素进行平移、旋转、缩放和扭曲等多种变换,从而创造...

    CSS3中transform属性的详解.docx

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

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

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

    css3 animation transform鱼游动动画特效.zip

    css3 animation transform鱼游动特效</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, user-scalable=no, ...

    vue中使用css3属性transform制作圆盘导航菜单代码

    利用transform属性写的圆盘导航

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

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

    CSS3 transform图片飞入动画特效

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

    css3 transform旋转属性鼠标悬停3D立体图片旋转显示

    在现代网页设计中,CSS3(层叠样式表第三版)提供了一系列强大的功能,其中之一就是`transform`属性。本教程将深入探讨`transform`中的旋转属性,以及如何利用这一特性实现鼠标悬停时3D立体图片的动态旋转展示效果。...

    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图片倾斜排列成照片墙效果

    在现代网页设计中,CSS3已经成为了不可或缺的一部分,它提供了许多强大的功能,让网页的视觉效果更加丰富多彩。本文将深入探讨如何使用CSS3的transform属性来实现“纯css3 transform图片倾斜排列成照片墙效果”。这...

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

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

    3D-css-transform.zip

    3D-css-transform.zip,css转换操场。可视化二维和三维css3转换功能的在线工具。,3D建模使用专门的软件来创建物理对象的数字模型。它是3D计算机图形的一个方面,用于视频游戏,3D打印和VR,以及其他应用程序。

    css3 transform属性制作线条的3D爱心动画demo.zip

    本示例中的"css3 transform属性制作线条的3D爱心动画demo.zip"就是一个利用CSS3的transform属性来创建一个3D爱心动画的实例。这个压缩包包含了一个简单的HTML文件,可以无需任何额外的软件或库,在电脑上直接打开...

Global site tag (gtag.js) - Google Analytics