css3中的变形 transform详解
一、变形-旋转 ratate()函数
通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度。如果这个值为正值,元素相对原点中心顺时针旋转;如果这
个值为负值,元素相对原点中心逆时针旋转。
transform:rotate(-20deg) 如下图:
二、变形- 扭曲 skew()函数
扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同,rotate()函数只是旋转,而不会改变
元素的形状。skew()函数不会旋转,而只会改变元素的形状。
- 一个参数:表示水平方向的倾斜角度;
- 两个参数:第一个参数表示水平方向的倾斜角度,第二个参数表示垂直方向的倾斜角度
分3种情况
transform:skewX(30deg) 如下图:
transform:skewY(10deg) 如下图:
transform:skew(-45deg) 如下图:
三、变形-缩放 scale() 函数
让元素根据中心原点对对象进行缩放。 scale()的取值默认的值为1,当值设置为0.01到0.99之间时,作用使一个元素缩小;而任何大于或等于1.01的值,作用是让元素放大。
也分3种情况:
transform:scale(x,y) 使元素水平方向和垂直方向同时缩放
transform:scale(x) X轴缩放
transform:scale(y) Y轴缩放
四、变形-位移 translate() 函数
translate()函数可以将元素向指定的方向移动,类似于position中的relative。或以简单的理解为,使用translate()函数,可以把元素从原来的位置移动,而不影响在X、Y轴上
的任何Web组件。
分为三种情况:
transform:translate(x,y) 使元素水平方向和垂直方向同时移动
transform:translate(x) 使元素水平方向移动
transform:translate(y) 使元素垂直方向移动
五、变形-原点 transform-origin
任何一个元素都有一个中心点,默认情况之下,其中心点是居于元素X轴和Y轴的50%处。如下图所示:
在没有重置transform-origin改变元素原点位置的情况下,CSS变形进行的旋转、位移、缩放,扭曲等操作都是以元素自己中心位置进行变形。但很多时候,我们可以通过
transform-origin来对元素进行原点位置改变,使元素原点不在元素的中心位置,以达到需要的原点位置。
transform-origin取值和元素设置背景中的background-position取值类似(也可以是具体的像素值),如下表所示:
css3中的变形 transform详解的更多相关文章
- css3中user-select的用法详解
css3中user-select的用法详解 user-select属性是css3新增的属性,用于设置用户是否能够选中文本.可用于除替换元素外的所有元素,以下是user-select的主要用法和注意事项 ...
- CSS3中的Transition属性详解
w3c标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发, ...
- CSS3中的Transition属性详解(贝赛尔曲线)
transition语法: transition : [<'transition-property'> || <'transition-duration'> || <'t ...
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) 在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...
- CSS3属性transform详解【转载】
CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) 在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...
- css3系列之transform详解translate
translate translate这个参数的,是transform 身上的,那么它有什么用呢? 其实他的作用很简单,就是平移,参考自己的位置来平移 translate() translateX() ...
- Objective-C中 Self和 Super详解
Objective-C中 Self和 Super详解 Objective-C 中Self 和 Super 详解本文要介绍的内容,在 Objective-C 中的类实现中经常看到这两个关键字 self ...
- CSS3中动画属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为改变,使 ...
- Android中Canvas绘图基础详解(附源码下载) (转)
Android中Canvas绘图基础详解(附源码下载) 原文链接 http://blog.csdn.net/iispring/article/details/49770651 AndroidCa ...
随机推荐
- SEO学习
一.什么是SEO SEO是由英文Search Engine Optimization缩写而来, 中文意译为“搜索引擎优化”!SEO是指通过对网站进行站内优化(网站结构调整.网站内容建设.网站代码优化等 ...
- servlet开发(二)之servlet的线程安全问题
之所以考虑线程安全问题,是因为引入了多线程.多线程指的是这个程序(一个进程)运行时产生了不止一个线程.如果不考虑多线程的话,程序执行只有一条路径,就像人在敲代码的时候只能敲代码,不能戴上耳机听歌.引入 ...
- Spring_Spring与IoC_基于XML的DI
一.注入分类 bean实例在调用无参构造器创建空值对象后,就要对Bean对象的属性进行初始化.初始化时由容器自动完成的,称为注入.根据注入方式的不同,常用的有2类:设值注入.构造注入.(还有一种,实现 ...
- mysql数据库详解
001 数据库应用系统设计 1.规划 2.需求分析 3.概念模型设计 4.逻辑设计 5.物理设计 6.程序编制及调试 7.运行及维护. 002 创建数据库 CREATE DAT ...
- Tips——单页面内的多重跳转路由使用
一.问题背景 一个路由往往代表一个地址,即一个页面.但同级网页页面的内容有很多是重复的,如果每次加载页面都要加载这些“共有”内容,会导致效率的降低.因此,单页面应用应运而生.它主张在同一页面下将“共同 ...
- 原生JS编写getByClass、addClass、removeClass、hasClass
前言: 年后换了工作,在现在的公司写交互主要使用JS原生:刚刚入门前端的时候写交互一直用的原生JS,虽然用的不怎么样.后来去之前的公司之后,leader主张把jQuery用好,JS原生自然就熟练了:一 ...
- Python-并发编程(进程)
接下来我们用几天的时间说一说python中并发编程的知识 一.背景知识 顾名思义,进程即正在执行的一个过程.进程是对正在运行程序的一个抽象. 进程的概念起源于操作系统,是操作系统最核心的概念,也是操作 ...
- Codeforces Round #412 A Is it rated ?
A. Is it rated? time limit per test 2 seconds memory limit per test 256 megabytes Is it rated? Her ...
- 添加CentOS扩展源
参考: http://blog.onovps.com/archives/centos-yum-epel.html https://fedoraproject.org/wiki/EPEL/zh-cn h ...
- 面试准备之一Python
基本数据类型 函数 模块与包 面向对象 网络编程 垃圾回收机制 G 并发编程