CSS3属性transform详解

原创 2018年04月17日 11:34:59

在CSS3中,可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理

一.旋转 rotate

用法:transform: rotate(45deg);

共一个参数“角度”,单位deg为度的意思,正数为顺时针旋转,负数为逆时针旋转,上述代码作用是顺时针旋转45度。

二.缩放 scale

用法:transform: scale(0.5)  或者  transform: scale(0.5, 2);

参数表示缩放倍数;

  • 一个参数时:表示水平和垂直同时缩放该倍率
  • 两个参数时:第一个参数指定水平方向的缩放倍率,第二个参数指定垂直方向的缩放倍率。

三.倾斜 skew

用法:transform: skew(30deg)  或者 transform: skew(30deg, 30deg);

参数表示倾斜角度,单位deg

  • 一个参数时:表示水平方向的倾斜角度;
  • 两个参数时:第一个参数表示水平方向的倾斜角度,第二个参数表示垂直方向的倾斜角度。

关于skew倾斜角度的计算方式表面上看并不是那么直观,这里借鉴某大拿绘制的图举例说明一下:

首先需要说明的是skew的默认原点transform-origin是这个物件的中心点

skewX(30deg) 如下图:

transform之skew 详解

 

skewY(10deg) 如下图:

transform详解之skewY

 

skew(30deg, 10deg) 如下图:

transform详解之skew

 

我当初就是看到此图瞬间理解的。

四.移动 translate

用法:transform: translate(45px)  或者 transform: translate(45px, 150px);

参数表示移动距离,单位px,

  • 一个参数时:表示水平方向的移动距离;
  • 两个参数时:第一个参数表示水平方向的移动距离,第二个参数表示垂直方向的移动距离。

五.基准点 transform-origin

在使用transform方法进行文字或图像的变形时,是以元素的中心点为基准点进行的。使用transform-origin属性,可以改变变形的基准点。

用法:transform-origin: 10px 10px;

共两个参数,表示相对左上角原点的距离,单位px,第一个参数表示相对左上角原点水平方向的距离,第二个参数表示相对左上角原点垂直方向的距离;

两个参数除了可以设置为具体的像素值,其中第一个参数可以指定为left、center、right,第二个参数可以指定为top、center、bottom。

六.多方法组合变形

上面我们介绍了使用transform对元素进行旋转、缩放、倾斜、移动的方法,这里讲介绍综合使用这几个方法来对一个元素进行多重变形。

用法:transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);

这四种变形方法顺序可以随意,但不同的顺序导致变形结果不同,原因是变形的顺序是从左到右依次进行,这个用法中的执行顺序为1.rotate  2.scalse  3.skew  4.translate

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wang414300980/article/details/79972473

Xamarin从0到100

Xamarin让.NET程序员在移动互联时代占据了有利位置,用熟悉的C#语言+XAML+地表最强Visual Studio 2017 能快速构建iOS / Android / Windows App 。
  • 2017年08月08日 10:41

简单粗暴的解释css3中的transform属性

事先说明,本文范畴尚限制在2D的transform中。        对于css3的transform属性,真是爱不释手,有了这个特性,各种特效轻松搞定。引用一句歌词“旋转,跳跃,我不停歇”。tra...
  • u010571913
  • u010571913
  • 2015-04-23 15:59:04
  • 1111

css3 新属性的兼容性之--transform

css3兼容性
  • ding_lucky
  • ding_lucky
  • 2017-06-13 11:01:09
  • 3663

CSS3的 transform属性,怎么才能让他同时执行多个不同动画(属性)效果

div{width: 100px; height: 100px; transition: all 1s; background: red;} div:hover{transform: rot...
  • muguli2008
  • muguli2008
  • 2016-07-14 15:09:08
  • 9756

transform属性——css3变形效果2D

一、transform           该属性允许我们对元素进行移动、缩放、旋转或倾斜 transform的属性值如下所示: 1、none                    无变换 2、tr...
  • MOONCOM
  • MOONCOM
  • 2017-01-15 20:58:40
  • 875

CSS3 transform介绍|如何设计炫酷的动画效果

CSS里transform变形这个属性有点学习难度,尤其在CSS3里加上了3D效果之后,2维变3维学习成本更是成倍提高。为什么设计师的眼里饱含着泪水,因为对页面效果爱的深沉。本篇就介绍一下transf...
  • yeana1
  • yeana1
  • 2016-07-08 15:44:45
  • 3459

CSS3 Transform、Transition和Animation属性总结

本博文总结了css3中的动画三兄弟:transform、transition和animation,介绍了这三个属性的基本使用方法,通过使用这三个属性可以达到很炫酷的效果。...
  • u014607184
  • u014607184
  • 2016-07-02 16:37:55
  • 12634

不要忘了css3动画效果transform 和过渡效果 transition:属性 时间 运动效果 延迟时间;

不要忘了css3动画效果transform 和过渡效果 transition:属性  时间 运动效果 延迟时间;...
  • u012028371
  • u012028371
  • 2016-08-25 15:06:03
  • 3028

CSS3中transform属性和transition属性

学习了CSS3之后觉得比JQuery更方便点。做点记录。以便复习。
  • Fly_TheWind
  • Fly_TheWind
  • 2016-04-13 18:50:17
  • 4090

CSS3 transform旋转属性

目前越来越多的浏览器兼容CSS3标准了,CSS3里有一个使对象旋转的属性transform rotate,号称兼容CSS3的浏览器对它的支持也不算好,好在Firefox、Webkit和Opera这些浏...
  • nhconch
  • nhconch
  • 2012-12-29 13:03:18
  • 3547
收藏助手
不良信息举报
您举报文章:CSS3属性transform详解
举报原因:
原因补充:

(最多只允许输入30个字)