开发者社区> 贾顺名> 正文

总结CSS3新特性(Transform篇)

简介: 概述: CSS3新添加的Transform可以改变元素在可视化区域的坐标(这种改变不会引起文档的重排,只有重排),以及形状,还有些3D形变.结合 Animation(这里以后会有个链接的) 能实现酷炫的动画; 旋转(rotate): rotate支持一个参数,一个角度值 0-360deg ...
+关注继续查看

概述:

CSS3新添加的Transform可以改变元素在可视化区域的坐标(这种改变不会引起文档的重排,只有重排),以及形状,还有些3D形变.结合 Animation(这里以后会有个链接的) 能实现酷炫的动画;

旋转(rotate):

rotate支持一个参数,一个角度值 0-360deg

#demo {
   transform:rotate(180deg)  ;/*实现旋转,左上角的东西会在右下角显示*/
}

缩放(scale):

scale支持两个参数(x,y),如果没有填y的话,则取x的值;1为正常,<1为缩放,>1为放大;

#demo {
  transform:scale(1.2);/*放大1.2倍*/
  transform:scale(.8);/*缩小为正常的0.8倍*/
}

scale提供两个子方法,scaleX,scaleY,用来分别设置x或y的缩放;

倾斜(skew):

skew支持两个参数(x,y),参数类型为角度(deg),如果不填y的话,则默认为0(与缩放不同);

#demo {
  transform:skew(45deg);/*文本沿x轴向左倾斜45°*/
  transform:skew(0,45deg);/*文本沿y轴向下倾斜45°*/
}

如果仅设x或y,可直接使用两个子方法,skewX与skewY;

平移(translate):

translate接收两个参数(x,y)为平移的距离,如不填y值,则默认为0,支持所有CSS内有效的长度单位(使用translate用来移动元素不会触发重排,只有重绘);

#demo {
  transform:translate(20px,5vh);/*向左移动二十像素,向下移动百分之五的视窗高度*/
}

同样有两个子方法,translateX,translateY;

 做了一个简单的小例子,用了rotate;

总结:

用Transform可以做出很多酷炫的事情,(跳过了matrix,matrix3d没有说...)当然了,不要像我这样作死

相关参考文档:

MDN的Transform

w3school的Transform

W3的文档

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
C# winform调用WebBrowser经典怪问题总结
原文:C# winform调用WebBrowser经典怪问题总结 最近一直研究网页数据采集,单单采集数据,其实HtmlAgilityPack就足够了。 对HtmlAgilityPack感兴趣的可以到这里看看:C#采集代理服务器ip并设置IE代理--HtmlAgilityPack实战代码 但是有个问题:要是想要模拟人工输入数据,进行表单提交HtmlAgilityPack就办不了,Skybound.Gecko(firfox的.net开源代码) 也办不了这个事情。
1850 0
开发者学堂课程干货总结——Spring Cloud微服务架构设计与开发实战(八)
Spring Cloud微服务架 Spring Cloud微服务架构设计与开发实战课时1.8—微服务架构的设计策略 。Java Spring Cloud是全球范围内最成熟、最完善、最流行的微服务架构方案体系。被众多的互联网大公司采用,包括阿里巴巴、腾讯、支付宝、网易、IBM、谷歌、京东、百度、滴滴等。电子书+视频为同学带来最佳学习效果,文字、课程链接、图谱地址统统为大家放送了哦!
122 0
开发者学堂课程干货总结——Java 虚拟机原理(五)
Java 虚拟机原理课时1.5——Dragonwell特性:JWarmup。通过本节课的学习,能够掌握Java 虚拟机原理,学习JNI、类加载器原理、safepoint机制等知识。 电子书+视频为同学带来最佳学习效果,文字、课程链接、图谱地址统统为大家放送了哦!
94 0
【Java8新特性】知识点总结,你都会了吗?
冰河,你可以给我讲讲Java8新特性的知识点吗?可以啊,没问题。这不,Java8新特性的知识点来了!
15 0
Ext架构分析(3)--Widget之父Component:总结
在这里,我们引用Ext Overview中的Component life cycle对组件的功能进行相应的总结: [list=1] 配置项对象生效: 组件对象的构造器会把全部的配置项传入到其子类中去,并且进行下列所有的步骤。
718 0
+关注
贾顺名
JavaScript全沾开发一枚,喜欢研究各种好玩的东西,努力学习GO。 GitHub: https://github.com/jiasm
62
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载