CSS3 transform详解,关于如何使用transform基础知识教程_css3小白入门

transform是css3的新特性之一。有了它可以box module变的更真实,这篇文章将全面介绍关于transform的使用。transform的作用 transform可以让元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。 这些属性定义上都从属于

CSS3 transform详解,关于如何使用transform基础知识教程

transform是css3的新特性之一。有了它可以box module变的更真实,这篇文章将全面介绍关于transform的使用。

CSS3 transform详解,关于如何使用transform基础知识教程_css3小白入门

transform的作用 

transform可以让元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。  这些属性定义上都从属于transform,因此把它们直接作为transform的value来表达。

transform的兼容写法

当然使用css3的实现一般都不会兼容低版面的IE,这里整理其他浏览器的兼容写法如下:

div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); 	/* IE 9 */
-moz-transform:rotate(7deg); 	/* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); 	/* Opera */
}

说明:Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。Opera 只支持 2D 转换。

transform语法

transform: none|transform-functions;

none:表示不进么变换;表示一个或多个变换函数,以空格分开;换句话说就是我们同时对一个元素进行transform的多种属性操作,例如rotate、scale、translate三种,但这里需要提醒大家的,以往我们叠加效果都是用逗号(“,”)隔开,但transform中使用多个属性时却需要有空格隔开。大家记住了是空格隔开。

transform-functions取值:transform属性实现了一些可用SVG实现的同样的功能。它可用于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放和移动元素,他有几个属性值参数:rotate;translate;scale;skew;matrix。

transform常用属性

transform:rotate():

旋转;

单位deg,设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。

transform:translate():

移动/位移;向右向上为整数,向左向下位移则为负“-”。

translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动);translateX(x)仅水平方向移动(X轴移动);translateY(Y)仅垂直方向移动(Y轴移动)。

transform:scale():

比例;比例放大用整数,缩小则为负“-”。

scale(X,Y)是用于对元素进行缩放,可以通过transform-origin对元素的基点进行设置,同样基点在元素中心位置;基中X表示水平方向缩放的倍数,Y表示垂直方向的缩放倍数,而Y是一个可选参数,如果没有设置Y值,则表示X,Y两个方向的缩放倍数是一样的。并以X为准。  

scaleX() : 使用 [sx,1] 缩放矢量执行缩放操作,sx为所需参数。scaleX表示元素只在X轴(水平方向)缩放元素,他的默认值是(1,1)。

scaleY() : 使用 [1,sy] 缩放矢量执行缩放操作,sy为所需参数。scaleY表示元素只在Y轴(垂直方向)缩放元素。

transform:skew():

倾斜/扭曲;参数表示倾斜角度,单位deg。

skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形);

skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形);

skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形);

transform:matrix

矩阵:matrix以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向(X轴)和垂直方向(Y轴)重新定位元素,此属性值使用涉及到数学中的矩阵。这里推荐大家去看

js对transform的取值和赋值

赋值如下:

element.style.webkitTransform = "";
element.style.webkitTransform = "";
element.style.MozTransform = "";
element.style.msTransform = "";
element.style.OTransform = "";
element.style.transform = "";

取值通过:

if(element.currentStyle){
	return element.currentStyle['transform'];
}else{
	return getComputedStyle(element,null)['transform'];
}

当然transform的属性还对应3D的,这块平时我们使用的比较少,这里就没做具体的介绍了,大家有详情可以去深入研究。

海计划公众号
(0)
上一篇 2020/04/06 04:11
下一篇 2020/04/06 04:11

您可能感兴趣的内容

  • styled-components入门基础知识_针对React写的一套css in js框架

    styled-components入门基础知识 官方网址:https://styled-components.com react css-in-js styled-componen…

    2020/03/06
  • bundle-buddy指南攻略_识别bundle重复的工具

    bundle-buddy指南攻略 GitHub:https://github.com/samccone/bundle-buddy 简介描述:识别bundle重复的工具 Bundle…

    2020/03/11
  • VuePress博客网站搭建基础指南_VuePress使用教程

    VuePressVuePress 由两部分组成:一个以 Vue 驱动的主题系统的简约静态网站生成工具,和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的。由 VuePress 生成的每个页面,都具有相应的预渲染静态 HTML,它们能提供出色的加载性能,并且对 SEO 友好。然而,页面加载之后,Vue 就会将这些静态内容,接管

    2020/03/26
  • vue 修改变量值无法渲染到页面小白入门_渲染基础知识教程

    开发中碰到这么个问题,修改对象中的属性无法渲染页面。直接操作ccc变量就是没问题的。直接贴我的代码data() {return {aaa: {bbb: false},ccc: false}
    }解决方法一:注意,第二个参数是字符串类型,切记。this.$set(this.aaa, ‘bbb’, ‘111’)解决方法二:this.aaa.bbb = ‘111’

    2020/03/30
  • 让前端监控数据采集更高效攻略教程_数据小白入门

    随着业务的快速发展,我们对生产环境下的问题感知能力越来越关注。作为距离用户最近的一层,前端的表现是否可靠、稳定、好用,很大程度上决定着用户对整个产品的体验和感受。因此,对于前端的监控不容忽视。搭建一套前端监控平台需要考虑的方面很多,比如数据采集、埋点模式、数据处理和分析、报警以及监控平台在具体业务中的应用等等。在这所有环节中,准确、完整、全面的数据采集是一切

    2020/03/30
  • 微信支付:任何将微信支付用于虚拟货币交易的行为将予以清退入门知识_支付菜鸟指南

    腾讯科技讯 10月10日,微信支付发布了对虚拟货币的态度声明。微信支付称,微信支付不支持虚拟货币交易,如发现任何把微信支付用于虚拟货币交易的行为,将予以清退处理。此前,支付宝安全中心也在微博上发文重申了对虚拟货币场外交易的态度。支付宝称,禁止将支付宝用于虚拟币交易,若发现交易涉及比特币或其他虚拟货币交易,支付宝会立即停止相关支付服务。以下为微信支付声明全文:

    2020/03/23
  • 理解Javascript的异步菜鸟知识_异步指南教程

    理解Javascript的异步菜鸟知识 总括: 本文梳理了异步代码和同步代码执行的区别,Javascript的事件循环,任务队列微任务队列等概念。 未曾失败的人恐怕也未曾…

    2020/03/20
  • vue-router之hash模式和history模式小白入门_Hash菜鸟教程

    当前版本: 3.0.3类目录: src/history/hash模式即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算)。比如这个 URL:http://www.abc.com/#/hello,hash 的值为 #/hello。它的特点在于:hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变

    2020/03/30
  • javascript怎么判断按钮被点击?使用帮助_js知识菜鸟教程下载

    JavaScript可以通过Event对象的target事件或srcElement(IE浏览器支持)来判断按钮是否被点击。Event对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。JavaScript判断按钮是否被点击:firfox版:
    <meta http-equiv="Content-Type" c

    2020/03/22
  • js中reduce()方法使用攻略_函数使用帮助

    介绍reducereduce() 方法接收一个函数作为累加器,reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(上一次回调的返回值),当前元素值,当前索引,原数组。语法:arr.reduce(callback,[initialValue])callback:函数中包含四个参数
    – previous

    2020/03/26
  • Split.js入门基础_一款可调节大小的拆分视图面板纯Js插件

    Split.js入门基础 官方网址:https://split.js.org/ GitHub:https://github.com/nathancahill/split 简介描述:…

    2020/03/07
  • 6种实现负载均衡技术的方式入门知识_性能基础知识教程

    负载均衡(Load Balance)是集群技术(Cluster)的一种应用,可以将工作任务分摊到多个处理单元,从而提高并发处理能力,有利于提升中大型网站的性能。接下来小编就为大家介绍6种实现负载均衡技术的方式:1. http重定向协议实现负载均衡根据用户的http请求计算出一个真实的web服务器地址,并将该web服务器地址写入http重定向响应中返回给浏览器

    2020/03/29
  • bideo.js菜鸟教程_轻松实现全屏视频背景

    bideo.js菜鸟教程 官方网址:https://rishabhp.github.io/bideo.js/ GitHub:https://github.com/rishabhp/…

    2020/03/06
  • 深入理解ES6 Modules入门攻略_Modules基础知识入门

    深入了解 ES6 Modules当下, 我们几乎所有的项目都是基于 webpack、rollup 等构建工具进行开发的,模块化已经是常态。我们对它并不陌生,今天,我们就再系统的回顾一下ES6的模块机制, 并总结下常用的操作和最佳实践, 希望对你有所帮助。一些简单的背景随用随取, 是一种我们都希望实现的机制。在 Javascript 中也一样,把一个大的 Ja

    2020/03/23
  • redux中间件的原理指南教程深入理解 Redux 中间件_redux入门教程

    前言
    最近几天对 redux 的中间件进行了一番梳理,又看了 redux-saga 的文档,和 redux-thunk 和 redux-promise 的源码,结合前段时间看的redux的源码的一些思考,感觉对 redux 中间件的有了更加深刻的认识,因此总结一下。
    一、Redux中间件机制
    Redux本身就提供了非常强大的数据流管理功能,但这并不是它唯一的

    2020/04/03
  • ShowFont小白帮助_英文字体下载网站,预览直观

    ShowFont小白知识 官方网址:http://www.showfont.net/ 简介描述:英文字体下载网站,预览直观 fonts,Download free fonts. C…

    2020/03/06