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

相关文章

来自专栏用户2442861的专栏

CSS基础(四):盒模型

HTML文档中可以将每个元素都看作是长方形的盒子。而CSS盒模型规定了元素框处理元素内容content、内边距padding、边框border和外边距marg...

803
来自专栏猛牛哥的博客

HTMLayout 界面贴图技术

1574
来自专栏前端知识分享

第181天:HTML5——视频、音频

761
来自专栏河湾欢儿的专栏

css3文本、盒模型阴影、倒影、自由缩放

css3新增盒模型阴影 box-shadow:[inset] x y blur [spread] color 参数 inset:投影方式 inset:内...

711
来自专栏小工匠技术圈

[Java小工匠]CSS盒子模型-边距合并

  CSS外边距合并,只有上外边距和下外边距才会触发外边距合并,左外边距和右外边距不会。

581
来自专栏HTML5学堂

img中alt与title辨析

HTML5学堂:img中alt与title有何不同?本文主要从表现在含义、浏览器中的表现以及对于网站seo优化程度三个方面进行辨析,接下来我们一起来看看。 示例...

2223
来自专栏前端知识分享

第97天:CSS3渐变和过渡详解

渐变是CSS3当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使用数量,并且具有很强的适应性和可扩展性。

663
来自专栏用户2442861的专栏

overflow:hidden属性

overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解。

561
来自专栏老马寒门IT

02-移动端开发教程-CSS3新特性(中)

背景在CSS3中也得到很大程度的增强,比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。

2070
来自专栏小筱月

animate 动画滞后执行的解决方案

针对 jQuery 中 slideUp、slideDown、animate 等动画运用时出现的滞后反复执行等问题的解决方法有如下:

881

扫码关注云+社区