css3(transform变形)

最新推荐文章于 2021-08-03 20:47:58 发布
最新推荐文章于 2021-08-03 20:47:58 发布
阅读量418 收藏
点赞数
分类专栏： CSS CSS3 文章标签： transform 旋转 缩放 平移 倾斜
CSS 同时被 2 个专栏收录
8 篇文章 0 订阅
订阅专栏
CSS3
7 篇文章 0 订阅
订阅专栏

css3(transform变形)

在CSS3中，用Transform功能可以实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形，这四种变形分别使用rotate、scale、skew和translate这四种方法来实现。将这四种变形结合使用，就会产生不同的效果，使用顺序不同，产生的效果是不一样的。

　　目前浏览器支持情况：Safari 3.1+、 Chrome 8+、Firefox 4+、Opera 10+、IE9+

　　一、旋转：

　　CSS中使用rotate方法来实现对元素的旋转，在参数中加入角度值，旋转方式为顺时针旋转。

　　例一：一个黄色的div元素，通过在样式代码中使用“transform: rotate(45deg)”，语句使这个div元素顺时针旋转45度。deg是CSS3的“Values and Units”模块中定义的一个角度单位。

　　代码清单1：

1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>Transform旋转</title>
 6         <style>
 7         div {
 8             width: 300px;
 9             margin: 150px auto;
10             background-color: yellow;
11             text-align: center;
12             -webkit-transform: rotate(45deg);    /* for Chrome || Safari */
13             -moz-transform: rotate(45deg);       /* for Firefox */
14             -ms-transform: rotate(45deg);        /* for IE */
15             -o-transform: rotate(45deg);         /* for Opera */
16         }
17         </style>
18     </head>
19     <body>
20         <div>黄色div</div>
21     </body>
22 </html>

运行结果（Chrome 14）:
这里写图片描述

　　二、缩放：

　　scale方法实现文字或图像的缩放效果，参数中指定缩放倍率，例如：“scale(0.5)”表示缩小50%，参数可以是整数，也可以是小数。

　　例二：将一个div元素缩小50%

　　代码清单2：
　　

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Transform缩放</title>
        <style>
        div {
            width: 300px;
            margin: 150px auto;
            background-color: yellow;
            text-align: center;
            -webkit-transform: scale(0.5);     /* for Chrome || Safari */
            -moz-transform: scale(0.5);        /* for Firefox */
            -ms-transform: scale(0.5);         /* for IE */
            -o-transform: scale(0.5);          /* for Opera */
        }
        </style>
    </head>
    <body>
        <div>黄色div</div>
    </body>
</html>

运行结果（Chrome 14）:

这里写图片描述

　　三、倾斜：

　　使用skew方法来实现文字或图像的倾斜效果，在参数中分别指定水平方向上的倾斜角度与垂直方向上的倾斜角度。例如“skew(30deg, 30deg)”表示水平方向上倾斜30度，垂直方向上也倾斜30度，

　　例三：将一个div元素在水平方向上倾斜30度，垂直方向上倾斜30度。

　　代码清单3：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Transform倾斜</title>
        <style>
        div {
            width: 300px;
            margin: 150px auto;
            background-color: yellow;
            text-align: center;
            -webkit-transform: skew(30deg, 30deg);    /* for Chrome || Safari */
            -moz-transform: skew(30deg, 30deg);       /* for Firefox */
            -ms-transform: skew(30deg, 30deg);        /* for IE */
            -o-transform: skew(30deg, 30deg);         /* for Opera */
        }
        </style>
    </head>
    <body>
        <div>黄色div</div>
    </body>
</html>

运行结果（Chrome 14）:
这里写图片描述

注意：skew方法中的两个参数可以修改成只使用一个参数，省略另一个参数，这可不是说水平方向和垂直方向一样，这种情况视为只在水平方向倾斜，垂直方向上不倾斜。

看一下运行结果：
这里写图片描述

　　四、移动：

　　使用translate方法来实现将文字或图像进行移动，在参数中分别指定水平方向上的移动距离与垂直方向上的移动距离。例如“translate(50px, 50px)”表示水平方向上移动50个像素，垂直方向上移动50个像素。

　　例四：将一个div元素水平方向上移动50个像素，垂直方向上移动50个像素。

　　代码清单4：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Transform移动</title>
        <style>
        div {
            width: 300px;
            margin: 150px auto;
            background-color: yellow;
            text-align: center;
            -webkit-transform: translate(50px, 50px);    /* for Chrome || Safari */
            -moz-transform: translate(50px, 50px);       /* for Firefox */
            -ms-transform: translate(50px, 50px);        /* for IE */
            -o-transform: translate(50px, 50px);         /* for Opera */
        }
        </style>
    </head>
    <body>
        <div>黄色div</div>
    </body>
</html>

运行结果（Firefox 7）:

这里写图片描述

注意：translate方法中的两个参数也可以修改成只使用一个参数，跟skew方法类似，省略另一个参数，这种情况视为只在水平方向移动，垂直方向上不移动。

运行结果(Firefox 7)：

这里写图片描述

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

　　例五：对一个div元素，先移动(向右移动150px，向下移动200px)，然后旋转(顺时针旋转45度)，最后缩放(放大1.5倍)。

　　代码清单5:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Transform多重变形（先移动，然后旋转，最后缩放）</title>
        <style>
        div {
            width: 300px;
            margin: 150px auto;
            background-color: yellow;
            text-align: center;
            -webkit-transform: translate(150px, 200px) rotate(45deg) scale(1.5);    /* for Chrome || Safari */
            -moz-transform: translate(150px, 200px) rotate(45deg) scale(1.5);       /* for Firefox */
            -ms-transform: translate(150px, 200px) rotate(45deg) scale(1.5);        /* for IE */
            -o-transform: translate(150px, 200px) rotate(45deg) scale(1.5);         /* for Opera */
        }
        </style>
    </head>
    <body>
        <div>黄色div</div>
    </body>
</html>

运行结果（Chrome 14）：

这里写图片描述

　　下面把上面代码中几个变形方法的顺序调整一下，先旋转(顺时针旋转45度)，然后缩放(放大1.5倍)，移动(向右移动150px，向下移动200px), 看看结果怎样：

　　代码清单6：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Transform多重变形（先旋转，然后缩放，最后移动）</title>
        <style>
        div {
            width: 300px;
            margin: 150px auto;
            background-color: yellow;
            text-align: center;
            -webkit-transform: rotate(45deg) scale(1.5) translate(150px, 200px);    /* for Chrome || Safari */
            -moz-transform: rotate(45deg) scale(1.5) translate(150px, 200px);       /* for Firefox */
            -ms-transform: rotate(45deg) scale(1.5) translate(150px, 200px);        /* for IE */
            -o-transform: rotate(45deg) scale(1.5) translate(150px, 200px);         /* for Opera */
        }
        </style>
    </head>
    <body>
        <div>黄色div</div>
    </body>
</html>

运行结果（Chrome 14）:

这里写图片描述

　　通过上面两个示例可以看出，元素在两个页面上所处位置并不相同，为什么会这样呢？

先看第一个例子：首先向右移动150px，向下移动200px，元素的中心点在水平方向先移动150px，再在垂直方向向下移动200px，然后在旋转45度，放大1.5倍。

第二个例子：首先旋转45度，并且放大了1.5倍，这时候元素是倾斜了45度角的，在移动的话，元素就是按45度角的方向向右移动150px，向下移动200px是沿着与水平方向呈225度方向移动的。看下下面的示意图就很明显了：
这里写图片描述

怎么样，很容易看明白吧。

　　指定变形的基准点：

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

　　例六：两个div元素，首先不改变变形的基准点，将第二个div元素进行旋转。

　　代码清单7：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>Transform指定基准点变形</title>
 6         <style>
 7         div {
 8             width: 200px;
 9             height: 200px;
10             display: inline-block;
11             line-height: 200px;
12             text-align: center;
13         }
14         div.a {
15             background-color: yellow;
16         }
17         div.b {
18             background-color: green;
19             -webkit-transform: rotate(45deg);        /* for Chrome || Safari */
20             -moz-transform: rotate(45deg);           /* for Firefox */
21             -ms-transform: rotate(45deg);　　　　　　　/* for IE */
22             -o-transform: rotate(45deg);             /* for Opera */
23         }
24         </style>
25     </head>
26     <body>
27         <div class="a">黄色div</div>
28         <div class="b">绿色div</div>
29     </body>
30 </html>

运行结果（Chrome 14）：
这里写图片描述

下面使用transform-origin属性把变形的基准点修改为第二个元素的左下角，代码如下：

代码清单8：

1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>Transform指定基准点变形</title>
 6         <style>
 7         div {
 8             width: 200px;
 9             height: 200px;
10             display: inline-block;
11             line-height: 200px;
12             text-align: center;
13         }
14         div.a {
15             background-color: yellow;
16         }
17         div.b {
18             background-color: green;
19             -webkit-transform: rotate(45deg);          /* for Chrome || Safari */
20             -moz-transform: rotate(45deg);             /* for Firefox */
21             -ms-transform: rotate(45deg);              /* for IE */
22             -o-transform: rotate(45deg);               /* for Opera */
23             /* 修改变形基准点 */
24             -webkit-transform-origin: left bottom;     /* for Chrome || Safari */
25             -moz-transform-origin: left bottom;        /* for Firefox */
26             -ms-transform-origin: left bottom;         /* for IE */
27             -o-transform-origin: left bottom;          /* for Opera */
28         }
29         </style>
30     </head>
31     <body>
32         <div class="a">黄色div</div>
33         <div class="b">绿色div</div>
34     </body>
35 </html>

运行结果（Chrome 14）：

这里写图片描述

　　指定transform-origin属性值的时候，采用“基准点在元素水平方向上的位置，基准点在元素垂直方向上的位置”的方法，其中“基准点在元素水平方向上的位置”中可以指定的值为left、center、right，“基准点在垂直方向上的位置”中可以指定的值为top、center、bottom。

smjor
关注
专栏目录
deform v10 破解版(10)
12-11
这是第10个分卷 详细说明见 1 总共14个分压缩卷！需全部下载！ 安装说明：win7 系统 需要把安装目录下的相应若干程序设置成 兼容windows xp ，以管理员身份运行！
CSS3中的变形处理——transform功能（旋转、缩放、倾斜、移动）
最新发布
2401_84098058的博客
04-12 1854
在CSS3中，可以利用transform功能实现文字或图像的旋转、缩放、倾斜、移动这4中类型的变形处理。（1）浏览器支持到目前为止：Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上浏览器支持该属性。使用rotate方法，在参数中加入角度值，角度值后面跟表示角度单位的“deg”文字即可，旋转方向为顺时针方向。使用scale方法来实现文字或图像的缩放处理，在参数中指定缩放倍率。//缩小一半（1）可以分别指定元素的水平方向的放大倍率与垂直方向的放大倍率。
CSS的优先级特性
deform0032的博客
03-25 141
　　如果同个元素有两个或以上冲突的CSS规则，浏览器有一些基本的规则来决定哪一个非常特殊而胜出。 　　它可能不像其它那么重要，大部分案例你不需要担心冲突，但大型而且复杂的CSS文件，或有很多CSS文件组成的，可能产生冲突。 　　选择器一样的情况下后面的会覆盖前面的属性。比如： p{color:red;} p{color:blue;} 　　p元素的元...
HTML5+CSS3 transform变形处理.docx
11-28
HTML5和CSS3的transform变形处理是Web开发中一个强大的工具，它允许开发者对网页元素进行二维和三维的视觉变换，极大地增强了网页的交互性和视觉效果。以下是对这个主题的详细解释： 首先，`transform`属性是CSS3中...
HTML5+CSS3 transform变形处理.pdf
11-28
在CSS3中，transform功能极大地扩展了网页动态效果的可能性，使得网页设计更加生动有趣。 1. 缩放：通过`transform: scale(x, y)`来实现元素的缩放。这里的x和y分别代表水平和垂直方向上的缩放比例。例如，`scale...
纯css3 transform文字变形3D阴影效果代码
11-05
在本主题中，我们将深入探讨如何使用CSS3的`transform`属性来实现文字的3D变形和阴影效果。`transform`属性允许我们对元素进行旋转、缩放、移动和倾斜等变换，从而创造出丰富的视觉效果。 首先，让我们理解`...
深入剖析CSS变形transform(3d)
09-24
本文将详细介绍关于transform变形3D的内容，但需以了解transform变形2D为基础。3D变形涉及的属性主要是transform-origin、transform、transform-style、perspective、perspective-origin、backface-visibility。一起...
CSS3 变形--旋转 rotate()
21号先锋者
02-24 1535
rotate()旋转：旋转rotate(-30deg)函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。 如果这个值为正值，元素相对原点中心顺时针旋转； 如果这个值为负值，元素相对原点中心逆时针旋转。 用法：transform:rotate(-30deg); 效果： 关于加上浏览器的前缀： transform:rotate...
CSS3动画 transform变形
21号先锋者
02-24 364
CSS3动画 CSS3在原来的基础上新增了变形和动画相关属性，通过这些属性可以实现以前需要大段JavaScript才能实现的功能。CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换，这样的变换可以控制HTML组件呈现出丰富的外观。 借助于位移、旋转、缩放、倾斜这4种几何变换，CSS3提供了transition动画。transition动画比较简单，只要指定HTML组件的...
transform实现元素的移动、缩放、旋转、变形
JianXingDeFeng的博客
12-03 6239
transform实现元素的移动、缩放、旋转、变形 既然用到了transform就先说说这个属性吧！ 一、transform属性简介 Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。现在暂时先说说属性和2D的转换吧！3D学习的成本，需要设备的性能和浏览器支持来支撑！所以先介绍3D的效果。 用法：transform:translate(
css怎么写突出的圆,圆形突出显示css3(Circular highlight css3)
weixin_33238239的博客
08-03 1011
圆形突出显示css3(Circular highlight css3)如何在网站上的任何对象上制作圆形突出显示....我一直在四处寻找，几乎找不到任何相关的文档。 虽然我似乎相信现在用css可以做任何事情，但有些东西告诉我这只能用像canvas这样的东西来获取并占用大量内存。我见过的唯一一篇关于这个的帖子就是这个... (jquery)遮屏整个屏幕并突出显示页面的一部分？ 虽然他们没有解决那里的通...
deform template
lcmssd
06-14 405
Alex Berg
CSS2.0盒模型层次3D示意图
deform0032的博客
04-10 133
转载于:https://www.cnblogs.com/vagerent/archive/2008/04/10/1147139.html
transform：旋转，缩放，倾斜或平移 transform：translate(-50%,-50%)、transition
JEFF_xieyuzhi的博客
09-10 2500
transform属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。 translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。 transform: rotate(180deg);//以中心点旋转180度 transition: all .6s;//过渡全部属性设置为0.6秒 推荐地...
CSS3变形属性 transform
qq_35401191的博客
08-03 679
形状变换属性： transform ： 可以实现元素的形状、角度、位置等的变化。 值： rotate(); 以x/y/z为轴进行旋转，默认为z rotatex(), rotatey(), rotatez(), rotate3d(x, y, z, angle) rotate3d(x, y, z, angle)（为三个方向的矢量和方向） 例  transform: rotatex(45de...
CSS3变形技巧：transform属性深度解析
"浅谈CSS3中的变形功能-transform功能" 在CSS3中，变形（transform）功能是一个强大的工具，它允许开发者对元素进行二维或三维空间内的各种变换操作，包括旋转、缩放、倾斜和移动。这个特性极大地提升了网页设计的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值