CSS3中的变形处理

变形分类

  • 缩放 使用scale方法来实现文字或图像的缩放,在参数中指定缩放倍率。例如“scale(0.5)”,表示缩小50
  • 倾斜 使用skew方法来实现文字或图像的缩放,在参数中指定水平方向的倾斜角度与垂直方向的倾斜角度,若只有一个数值,则为水平方向的倾斜角度,单位为deg。 注:rotate表示的是旋转,仅一个数值,表示水平方向的旋转角度。
  • 移动 使用translate方法来实现文字或图像的移动,在参数中指定水平方向的移动与垂直方向的移动,若只有一个数值,则为水平方向的移动。

对一个元素的多种变形方法

  • 格式示例
 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta http-equiv="content-type" content="text/html; charset=utf-8">
 5     <meta http-equiv="x-ua-compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 7     <title>测试</title>
 8 </head>
 9 <body>
10 <section id="a-section1-3-b">a-section1-3-b</section>
11 <section id="section1-4-b">section1-4-b</section>
12 <style>
13     [id $= 'b']{ /* id以b结尾的 */
14         background-color: lightpink;
15         -webkit-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);
16         -moz-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);
17         -ms-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);
18         -o-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);
19         transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);
20         /*缩小50% 水平垂直方向倾斜30°(rotate只有水平旋转) 水平垂直移动30px*/
21     }
22     #a-section1-3-b{
23         -webkit-transform-origin: left bottom;
24         -moz-transform-origin: left bottom;
25         -ms-transform-origin: left bottom;
26         -o-transform-origin: left bottom;
27         transform-origin: left bottom;
28         /*更换变形原点*/
29     }
30 </style>
31 </body>
32 </html>
  • 变形基点transform-origin 这个参数可以改变变形基点,其属性值表示“基准点在元素水平方向上的位置,基准点在元素垂直方向上的位置”。其中“基准点在元素水平方向上的位置”中可以指定的值为left,center,right,“基准点在元素垂直方向上的位置”中可以指定的值为top,center,bottom。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯IVWEB团队的专栏

SVG 动画精髓(上)

DR本文主要是讲解关于 SVG 的一些高级动画特效,比如 SVG 动画标签,图形渐变,路径动画,线条动画,SVG 裁剪等。例如:路径动画图形渐变:线条动画:以及...

7990
来自专栏落影的专栏

iOS坐标系探究

APP 在渲染视图时,需要在坐标系中指定绘制区域。这个概念看似乎简单,事实并非如此。

6503
来自专栏闵开慧

html中align属性

成员名称 说明 AbsBottom 图像的下边缘与同一行中最大元素的下边缘对齐。 AbsMiddle 图像的中间与同一行...

3425
来自专栏黒之染开发日记

HTML5 canvas drawImage() 方法记录

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 drawImage() 方法。 注释:Interne...

1512
来自专栏埋名

CSS样式clip-path绘制图形裁剪图片

发现clip-path绘制图形的网站 http://bennettfeely.com/clippy/ 专门介绍clip-path的使用,几乎任何形状都可以做出来...

2522
来自专栏知识分享

3-关于"小五物联"的功能介绍(添加波形图,Achartengine)

2513
来自专栏Android先生

Android自定义View——从零开始实现书籍翻页效果

前言:在上篇Android自定义View——从零开始实现书籍翻页效果(二)博客中,我们 补全了翻页效果以及增加了 取消翻页的动画,这期要教大家如何 向View填...

5582
来自专栏SpiritLing

CSS3 translate、transform、transition区别

translate:移动,     transform的一个方法               通过 translate() 方法,元素从其当前位置移动,根据给定...

3765
来自专栏tkokof 的技术,小趣及杂念

Half-Pixel Offset 究竟是个什么鬼?

友情提示 Half-Pixel Offset 其实算是个过时话题,请依据个人情况谨慎了解 :)

1072
来自专栏WD学习记录

2016-7-3 webGL

ctx.fillRect(120,10,150,150);前两个为x、y坐标后边为长和宽

922

扫码关注云+社区

领取腾讯云代金券