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 条评论
登录 后参与评论

相关文章

来自专栏十月梦想

边框阴影

561
来自专栏前端萌媛的成长之路

元素垂直居中和水平居中的方法

992
来自专栏Bingo的深度学习杂货店

水平居中和垂直居中

本章介绍几种常见的水平居中和垂直居中的实现方式 <!DOCTYPE html> <html> <head> <title>水平居中和垂直居中</titl...

2823
来自专栏大数据钻研

初探HTML之CSS篇(属性)

前言 I am a slow walker,but I never walk backwards. ---- CSS(层叠样式表) CSS是一种用来表现HTML...

1943
来自专栏极乐技术社区

wxss学习系列《三》背景(Background)与颜色(Color),边框(Border)

一、背景(Background)与颜色(Color) 一、背景:background。 设置对象的背景特性。一个元素可以设置多重背景图像,每组之间用逗号隔开,如...

2085
来自专栏前端知识分享

第212天:15种CSS居中的方式,最全了

CSS居中是前端工程师经常要面对的问题,也是基本技能之一。今天有时间把CSS居中的方案整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种。如有漏掉...

521
来自专栏mukekeheart的iOS之旅

Android layout属性大全

第一类:属性值 true或者 false  android:layout_centerHrizontal 水平居中         android:layo...

2139
来自专栏web前端-

css3渐变

线性渐变: 属性:linear-gradinet(开始位置 角度,起始颜色,终止颜色 ) 开始位置:渐变开始的位置,属性值可以为百分比/长度/left、righ...

562
来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS3(二)颜色模式,文字阴影,盒模型,边框圆角,边框阴影

红橙黄绿青蓝紫红:颜色从 0~360 顺序,各占30度。比如红色为0,黄色为120,绿色为240。

763
来自专栏十月梦想

CSS基础总结

                background:url() no-repeat position

571

扫描关注云+社区