首页 > 代码库 > CSS3中的变形处理

CSS3中的变形处理

2024-10-12 17:03:02   213人阅读

变形分类

  • 缩放

    使用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 <h3>变形分类</h3>
11 <section id="a-section1-3-b">a-section1-3-b</section>
12 <section id="section1-4-b">section1-4-b</section>
13 <style>
14     [id $= ‘b‘]{ /* id以b结尾的 */
15         background-color: lightpink;
16         -webkit-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);
17         -moz-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);
18         -ms-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);
19         -o-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);
20         transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);
21         /*缩小50% 水平垂直方向倾斜30°（rotate只有水平旋转） 水平垂直移动30px*/
22     }
23     #a-section1-3-b{
24         -webkit-transform-origin: left bottom;
25         -moz-transform-origin: left bottom;
26         -ms-transform-origin: left bottom;
27         -o-transform-origin: left bottom;
28         transform-origin: left bottom;
29         /*更换变形原点*/
30     }
31 </style>
32 </body>
33 </html>

  • 变形基点transform-origin

    这个参数可以改变变形基点，其属性值表示“基准点在元素水平方向上的位置，基准点在元素垂直方向上的位置”。其中“基准点在元素水平方向上的位置”中可以指定的值为left，center，right，“基准点在元素垂直方向上的位置”中可以指定的值为top，center，bottom。

<style>ul { list-style: none } h3 { counter-increment: h3_counter; counter-reset: h4_counter } h3::before { content: counter(h3_counter)"." } h4 { counter-increment: h4_counter } h4::before { content: counter(h3_counter)"-"counter(h4_counter)"." }</style>

CSS3中的变形处理


联系
我们