html transform属性,css3 transform属性详解

CSS3变形是一些效果的集合,比如平移translate() 、旋转rotate()、缩放scare()和倾斜skew()效果,每个效果都被称作为变形函数(Transform Function),它们可以操控元素发生旋转、缩放、和平移等变化。

CSS3的2D transform函数包括了translate()、scale()、rotate()和skew()。

translate()函数接受CSS的标准度量单位;scale()函数接受一个0和1之间的十进制值;rotate()和skew()两个函数都接受一个径向的度量单位值deg。除了rotate()函数之外,每个函数都接受X轴和Y轴的参数。

CSS3变形中具有X /Y可用的函数:translateX()、translateY()、scaleX()、scaleY()、skewX()和skewY()。(translateX(正的向右),translateY(负的向上))

2D transform常用的transform-function的功能:

translate():用来移动元素,可以根据X轴和Y轴坐标重新定位元素位置。在此基础上有两个扩展函数:translateX()和translateY()。

scale():用来缩小或放大元素,可以使用元素尺寸发生变化。在此基础上有两个扩展函数:scaleX()和scaleY()。

rotate():用来旋转元素。

skew():用来让元素倾斜。在此基础上有两个扩展函数:skewX()和skewY()。

matrix():定义矩阵变形,基于X轴和Y轴坐标重新定位元素位置。

3D transform常用的transform-function的功能:

translate3d():移元素元素,用来指定一个3D变形移动位移量

translate():指定3D位移在Z轴的位移量。

scale3d():用来缩放一个元素。

scaleZ():指定Z轴的缩放向量。

rotate3d():指定元素具有一个三维旋转的角度。

rotateX()、rotateY()和rotateZ():让元素具有一个旋转角度。

perspective():指定一个透视投影矩阵。

matrix3d():定义矩阵变形。

设置transform-style的值为preserve-3d值,建立一个3D渲染环境。

transform-origin属性指定元素的中心点在哪。transform-origin属性值可以是百分比、em、px等具体的值,也可以是top、right、bottom、left和center这样的关键词。

`perspective`属性: 设置元素被查看位置的视图。 perspective 属性定义 3D 元素距

视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

`perspective-origin:` 设置 3D 元素的基点位置。 属性定义 3D 元素所基于的 X 轴

和 Y 轴。该属性允许您改变 3D 元素的底部位置。

Perspective:景深

perspective-origin :景深基点

transform-origin:变换基点

26c9b919fa7e12201cf3850967255f66.png

注意:和transform属性易混淆的是transition过渡属性(不是translate()移动变化哦)。

看下面一个例子:

复制代码代码如下:

.animation{

transform:rotate(20deg) scaleX(1.7) scaleY(-0.7) translateX(132px)

translateY(21px) skewX(-26deg) skewY(5deg);

}

Transform变化

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/265280.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

UIApplication的作用

1.设置app图标右上角的数字2.设置状态栏的属性(样式、是否要显示)3.打开某个链接\发短信\打电话4.keyWindow : 访问程序的主窗口(一个程序只能有一个主窗口)5.windows : 访问程序中的所有窗转载于:https://www.cnblogs.com/gatsby…

PHP调用新浪API 生成短链接

我们经常收到类似于这样的短信(如下图),发现其中的链接并不是常规的网址链接,而是个短小精悍的短链接,产品中经常需要这样的需求,如果在给用户下发的短信中是一个很长的连接,用户体验肯定很差&a…

Chrome如何下载网页视频

目录第一步:右键,选择「检查」指令,进入代码控制面板第二步:单击代码面板左上角红色标出来的按钮,然后鼠标移到左边视频上第三步:双击src后面的代码(全部展开),复制粘贴到…

使用MUTT步骤

使用MUTT,以下是步骤:1.1、首先确认一下MUTT是被已经安装 [oracledevdb02 ]$ rpm -aq | grep muttmutt-1.4.1-11.rhel41.2、检查系统是否安装中文字符集 [oracledevdb02 ]$ locale -a | grep zh_CNzh_CNzh_CN.gb18030zh_CN.gb2312zh_CN.gbkzh_CN.u…

html iso标准文档,HTML ISO-8859-1 参考手册

HTML ISO-8859-1 参考手册ISO(全称 International Standards Organization)为不同的字母/语言定义了标准的字符集。在 HTML 4.01 中,ISO-8859-1 是默认的字符。现代的浏览器支持的字符集:ISO-8859-1ISO-8859-1 是大多数浏览器默认的字符集。ISO-8859-1 的…

单链表反转

参考:【图文解析】反转一个单链表 作者:giturtle 发布时间: 2019-03-18 15:26:38 网址:https://blog.csdn.net/qq_42351880/article/details/88637387?spm1001.2014.3001.5501 目录例题描述思路代码实现例题描述 反转一个链表 …

Unity优化总览

CPU GC 序列化与反序列化,如protobuff,json解析String的频繁构造,拼接,如ToString()会生成字符串,Object.name会返回拷贝闭包和匿名函数,在闭包中调用外部变量时会创建临时class对象,匿名函数当做参数传入时,也会有内存开销有开销的函数,如Camera.main等,缓存一下Transform只存…

Rake的使用

Rake 是一套类似 Make 的 Builder 工具,让我们可以编写一些脚本任务,并且很方便设定各任务的相依性。在 Rails 之中就內建了许多 rake 指令,除了你已经使用过的 rake db:migrate 之外,还有例如:rake db:migrate rake d…

html5 usb调试,USB调试怎么打开 USB调试模式打不开怎么刷机

2016-04-25 16:58:28USB调试怎么打开 USB调试模式打不开怎么刷机标签:USB调试,刷机,recovery模式,卡刷【ROM之家】在手机很多应用使用时需要打开USB调试,比如连接电脑,刷机等操作。但有时候会遇上USB调试模式打不开,可能会选择刷机…

this 和super关键字

一、this 关键字 this关键字代表的就是函数所属的调用者。this关键字的作用: 1.如果存在同名的成员变量与局部变量时,在方法内部默认的时访问的时局部变量,可以通过this关键字调用成员变量 2.在一个构造方法中调用另一个构造方法来初始化对象this关键字要注意…

MODBUS通讯协议详解(基于485)

参考:灵育科技Modbus课程总结 作者:Naunyang 时间:2020-11-23 13:51:58 网址:https://blog.csdn.net/Naunyang/article/details/108740456?spm1001.2014.3001.5502 参考:MODBUS用于单片机通讯 作者:hillch…

C\C++与Java中的static关键字

C\C里面的static: 面向过程的static: 在c和c面向过程的设计里,在全局变量前加上static关键字则可将该变量定义为一个静态全局变量,比如: static int a; 那么c和c中的静态全局变量有什么特点呢: 1、 变…

步进电机、伺服电机、舵机、无刷电机、有刷电机区别

更多干货推荐可以去牛客网看看,他们现在的IT题库内容很丰富,属于国内做的很好的了,而且是课程刷题面经求职讨论区分享,一站式求职学习网站,最最最重要的里面的资源全部免费!!!点击进…

56、servlet3.0-与SpringMVC整合分析

56、servlet3.0-与SpringMVC整合分析 web容器在启动的时候,会扫描每个jar包下的META-INF/services/javax.servlet.ServletContainerInitializer加载这个文件指定的类SpringServletContainerInitializerspring的应用一启动会加载感兴趣的WebApplicationInitializer接…

html提交form预处理,HTML5 之图片上传预处理

在开发 H5 应用的时候碰到一个问题,应用只需要一张小的缩略图,而用户用手机上传的确是一张大图,手机摄像机拍的图片好几 M,这可要浪费很多流量。获取图片通过 File API 获取图片。var input document.createElement(input);input…

PID算法实现温控

参考:PID算法 作者:hillchina 发布时间: 2016-09-28 21:48:04 网址:https://www.bilibili.com/video/BV1Ds411t7Hr 以上完整的视频教程在腾讯课堂里有,在腾讯课堂里搜索PID,找到灵育科技,课程对…

React.js

类似于Jquery,主要是操作Dom 特点:1、基于组件开发 2、基于虚拟dom,速度快 用React的所需要引入的三个包: 1、react.min.js (引入React语法) 2、react-dom.min.js (用react操作Dom)…

[Unity3d]多个摄像机叠加效果

今天学习到一个多个摄像机看到的场景在同一个层显示,比如我们做一个类似反光镜的效果,当然反光镜可以直接用Shader来实现,但我就是了实现一个类比这样的一个效果,一个摄像机将看到的图像显示到一个Texture上,然后将Tex…

单片机程序跑飞原因

参考:单片机程序又跑飞? 作者:嵌入式ARM 网址:https://mp.weixin.qq.com/s/a22zVdSfCqWjSmlBxK2R1Q 目录数组越界/溢出中断服务程序缺失看门狗复位单片机中有看门狗,长时间不喂狗,程序就会复位。为什么长时…

html5大赛是什么,IE9开发大赛为HTML5打了一针兴奋剂

尽管HTML5是一种新的网页浏览标准,目前仅有苹果和微软的IE9支持该标准。客观地说,HTML5还是小众用户的标准。对于IE9来说,如果HTML5标准无法普及,IE9的硬件加速和性能优势就无从体现。加之Adobe一直力挺Flash,这对HTML…