CSS3的2D图形变形方法

最新推荐文章于 2022-07-15 16:02:03 发布
最新推荐文章于 2022-07-15 16:02:03 发布
阅读量432 收藏
点赞数 1
文章标签： css3 css html 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50706420/article/details/121277004
版权

移动

translate(x,y)

该方法可用于在页面上平移元素，参数x指代水平方向，y指代竖直方向。

语法：

<style>
    p{
        transfrom:translate(10px,20px);
        /* 将p标签向右移动10px，向下移动20px */
    }
</style>

参数y可以省略，如果省略则代表竖直方向上偏移量为0。

如：

<style>
    p{
        transform: translate(30px);
        /* 省略了竖直方向上的参数---竖直方向上平移距离为0px */
        /* 将p标签元素向右平移30px */
    }
</style>

translateX(x)

该方法用于水平方向上的平移

translateY(y)

该方法用于竖直方向上的平移

实例：

<!DOCTYPE html>
<html>
​
<head>
    <meta charset="utf-8">
    <title>CSS3 2D移动效果</title>
    <style>
        div {
            width: 50px;
            height: 40px;
            margin: 20px;
            border: 1px solid;
            display: inline-block;
            /* 将块级元素转为行内块元素，一行可以放置多个div */
            text-align: center;
            padding: 20px;
            background-image: url(image/caidog.png);
            /* 设置背景图片 */
            background-size: 100%;
            /* 设置背景图片大小 */
        }
        /* translate() */
        
        div.change1 {
            transform: translate(70px, -30px);
        }
        /* translateX() */
        
        div.change2 {
            transform: translateX(100px);
            /* 上面的语句等价于 transform:translate(100px); */
        }
        /* translateY() */
        
        div.change3 {
            transform: translateY(40px);
        }
    </style>
</head>
​
<body>
    <h3>CSS3 2D移动效果</h3>
    <h4>参照系没有移动</h4>
    <div>原图</div>
    <div>变化后</div>
    <hr>
​
    <h4>向右移动了70像素，向上移动了30像素</h4>
    <div>原图</div>
    <div class="change1">变化后</div>
    <hr>
​
    <h4>向右移动了像素</h4>
    <div>原图</div>
    <div class="change2">变化后</div>
    <hr>
​
    <h4>向下移动了40像素</h4>
    <div>原图</div>
    <div class="change3">变化后</div>
</body>
​
</html>

效果图：

旋转

rotate(<angle>)

该方法可用于在页面上旋转元素。参数<angle>代表旋转的角度，角度为正则顺时针旋转；角度为负则逆时针旋转。

语法：

<style>
    p {
        transform: rotate(30deg);
        /* 将p标签顺时针旋转30度 */
    }
</style>
<style>
    p {
        transform: rotate(-30deg);
        /* 将p标签逆时针旋转30度 */
    }
</style>

实例：

<!DOCTYPE html>
<html>
​
<head>
    <meta charset="utf-8">
    <title>CSS3 2D旋转效果----rotate</title>
    <style>
        div {
            width: 50px;
            height: 40px;
            margin: 10px 30px;
            /* 设置外边距 */
            border: 1px solid;
            /* 设置边框粗细 */
            display: inline-block;
            /* 将块级元素转变为行内块元素 */
            text-align: center;
            /* 文本居中显示 */
            padding: 20px;
            /* 设置内边距 */
            background-image: url(image/caidog.png);
            /* 设置背景图片 */
            background-size: 100%;
            /* 设置背景图片大小 */
        }
        /* rotate() */
        
        div.change1 {
            transform: rotate(30deg);
            /* 顺时针旋转30度 */
        }
        
        div.change2 {
            transform: rotate(-20deg);
            /* 逆时针旋转20度 */
        }
    </style>
</head>
​
<body>
    <h3>CSS3 2D旋转效果</h3>
    <h4>参照系没有移动</h4>
    <div>原图</div>
    <div>变化后</div>
    <hr>
​
    <h4>顺时针旋转20度</h4>
    <div>原图</div>
    <div class="change1">变化后</div>
    <hr>
​
    <h4>逆时针旋转20度</h4>
    <div>原图</div>
    <div class="change2">变化后</div>
</body>
​
</html>

效果图：

缩放

scale(x,y)

该方法由于在页面上放大或缩小元素。参数x，y代表放大或缩小的倍数。x,y 可以取整数或者浮点数，若参数小于1则代表缩小。

语法：

<style>
    p {
        transform: scale(2, 3);
        /* 将p标签的宽度变为原来的2倍。高度变为原来的3倍 */
    }
</style>

如果参数y省略，则默认y轴上的缩放倍数与x相同。

<style>
    p {
        transform: scale(2);
        /* 将p标签的宽度高度均变为原来的2倍 */
    }
</style>

scaleX(x)

指定x方向（水平方向）上的缩放

scaleY(y)

指定y方向（竖直方向）上的缩放

实例：

<!DOCTYPE html>
<html>
​
<head>
    <meta charset="utf-8">
    <title>CSS3 2D缩放效果</title>
    <style>
        div {
            width: 50px;
            height: 40px;
            margin: 10px 30px;
            border: 1px solid;
            display: inline-block;
            text-align: center;
            padding: 20px;
            background-image: url(image/caidog.png);
            background-size: 100%;
        }
        /* scale() */
        
        div.change1 {
            transform: scale(0.6, 0.5);
        }
        /* scaleX() */
        
        div.change2 {
            transform: scaleX(1.3);
        }
        /* scaleY() */
        
        div.change3 {
            transform: scaleY(2.4);
        }
    </style>
</head>
​
<body>
    <h3>CSS3 2D缩放效果----scale</h3>
    <h4>参照系没有缩放</h4>
    <div>原图</div>
    <div>变化后</div>
    <hr>
​
    <h4>宽度缩小到原来的0.6倍，高度缩小到原来的0.5倍</h4>
    <div>原图</div>
    <div class="change1">变化后</div>
    <hr>
​
    <h4>宽度放大到原来的1.3倍</h4>
    <div>原图</div>
    <div class="change2">变化后</div>
    <hr>
​
    <h4>高度放大到原来的2.4倍</h4>
    <div>原图</div>
    <div class="change3">变化后</div>
</body>
​
</html>

效果图：

翻转

skew(<angleX>,<angleY>)

该方法用于页面元素的翻转。参数<angleX>代表水平方向x轴上的倾斜扭曲角度；<angleY>代表竖直方向y轴上的倾斜扭曲角度。

语法：

<style>
    p{
        transform: skew(30deg,20deg);
        /* 将p标签横向倾斜30度，纵向倾斜20度 */
    }
</style>

参数<angleY>可以省略。如果省略，则默认为0。

如：

<style>
    p {
        transform: skew(30deg);
        /* 将p标签横向倾斜30度，纵向不倾斜 */
    }
</style>

scaleX(x)

该方法用于水平方向上的倾斜

scaleY(y)

该方法用于竖直方向上的倾斜

实例：

<!DOCTYPE html>
<html>
​
<head>
    <meta charset="utf-8">
    <title>CSS3 2D翻转效果</title>
    <style>
        div {
            width: 50px;
            height: 40px;
            margin: 10px 30px;
            border: 1px solid;
            display: inline-block;
            text-align: center;
            padding: 20px;
            background-image: url(image/caidog.png);
            background-size: 100%;
        }
        /* skew() */
        
        div.change1 {
            transform: skew(45deg, 15deg);
        }
        /* skewX() */
        
        div.change2 {
            transform: skewX(35deg);
        }
        /* skewY() */
        
        div.change3 {
            transform: skewY(30deg);
        }
    </style>
</head>
​
<body>
    <h3>CSS3 2D翻转效果----skew</h3>
    <h4>参照系没有移动</h4>
    <div>原图</div>
    <div>变化后</div>
    <hr>
​
    <h4>x轴方向倾斜45度，y轴方向倾斜15度</h4>
    <div>原图</div>
    <div class="change1">变化后</div>
    <hr>
​
    <h4>x轴方向倾斜35度</h4>
    <div>原图</div>
    <div class="change2">变化后</div>
    <hr>
​
    <h4>y轴方向倾斜30度</h4>
    <div>原图</div>
    <div class="change3">变化后</div>
</body>
​
</html>

效果图：

微南汐
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3中的变形处理——transform功能（旋转、缩放、倾斜、移动）
xuan的博客
08-23 2万+
1 transform属性 在CSS3中，可以利用transform功能实现文字或图像的旋转、缩放、倾斜、移动这4中类型的变形处理。 （1）浏览器支持 到目前为止：Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上浏览器支持该属性。  2 旋转 使用rotate方法，在参数中加入角度值，角度值后面跟表示角度单位的“deg”文字即可，旋转方向为顺时针方向。...
CSS3 2D旋转
boonyaxnn的博客
03-12 834
W3CSchool标准CSS使用语法*transform:skew(deg,deg)-针对不同浏览器兼容 div { transform: skew(30deg,20deg); -ms-transform: skew(30deg,20deg); /* IE 9 */ -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */ -o-
CSS3新特性详解(三)：CSS3 2D转换和3D转换 transform 变形使用详解
chuangxin的专栏
07-07 2796
transform是一个相对比较难的属性，2D转换还好点，3D转换由于涉及空间旋转、透视等比较难以理解，但是我们只要掌握transform本质上就是一系列变形函数，分别是translate位移，scale缩放，rotate旋转，skew扭曲和matrix复合变换，再结合些许空间透视概念，那么我们一定可以驾驭transform
css3 3d 图片倾斜
LXY_liuxingyao的博客
11-08 783
<!DOCTYPE html> <html> <head> <style> div { width:100px; height:75px; background-color:yellow; border:1px solid black; } div#div2 { margin:20px; transform:skew(30deg,20deg); ...
CSS3转换属性（Transform）
qq_45799465的博客
01-26 3170
变形属性：transform transform翻译成汉语具有"变换"或者"改变"的意思。 通过此属性具有非常强大的功能，比如可以实现元素的位移、拉伸或者旋转等效果 最能体现transform 属性强大实力的是实现元素的3D变换效果 变形属性：transform的所有属性值 transform：none; 默认值 transform：translate（）； 移动 平移 单位是px transform：rotate（）； 旋转 单位是deg deg度数 ...
CSS3之2D与3D变换的实现方法
09-22
css3实现了对元素执行2D平面变换，以及视觉上的3D空间变换，2D变换平时可能用的较多，3D效果也能锦上添花，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
使用CSS3创建不规则图形
02-03
现在，我们已经可以使用CSS3常见不规则复杂图形了，如下图所示：使用CSS创建的图形，无法内置文字或实现文字环绕效果。因此，如何实现不规则图形和文字复杂布局也成为了一个热议话题。今天我们就来介绍一下如何实现...
CSS3 2D模拟实现摩天轮旋转效果
09-24
主要为大家详细介绍了CSS3 2D模拟实现摩天轮旋转效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
CSS3卡通3D货车图形特效
07-24
CSS3卡通3D货车图形特效是一款装满货物的卡通货车图形ui特效。
css3的transform属性详解
m0_46384421的博客
03-01 1450
transform变形属性（主要讨论2D） css 3的transform属性可以修改css中可视化模型的坐标空间，元素通过transform属性进行移动（translate）、旋转（rotate）、缩放（scale）以及倾斜（skew） 注意：规范中有规定——如果元素的transform值不为none，则该元素会生成包含块的创建和层叠上下文 包含块的创建和层叠上下文会影响子元素的一些属性（这里我...
css3图片变形特效.zip
07-11
代码简介：css3图片变形特效是一款鼠标移到正方形图片会自动变为圆形修边图片效果。
一文搞懂transform: skew
weixin_30323631的博客
08-31 637
如何理解斜切skew，先看一个demo。在下面的demo中，有4个正方形，分别是 红色：不做skew变换， 绿色：x方向变换， 蓝色：y方向变换， 黑色：两个方向都变换， 拖动下面的滑块可以查看改变skew角度后的效果。切换selector可以设置transform-origin，origin默认是 0% 0%。大家可以把玩一下。 如果你把滑块拖到了90deg或者-90deg，那么你应该...
2D和3D变换
weixin_45832989的博客
03-28 156
2D和3D变换 rotate(angle)方法 通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。 /值 rotate(30deg) 把元素顺时针旋转 30 度。/ transform: rotate(30deg); translate(x,y)方法 通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数。 /值 translate(50px,100px) 把元素从左侧移动 50 像素，从
CSS实现2D效果
akaWoverine的博客
11-01 177
CSS实现2D效果 放大缩小背景色变化 语法 属性 描述 transition 简写属性，用于在一个属性中设置四个过渡属性 transition-property 规定应用过渡的CSS属性的名称 transition-duration 定义 过渡花费的时间，默认是0 transition-timing-function 规定过渡效果的时间曲线，默认是"ease" transition-delay 规定过渡效果何时开始，默认是0 示例 transition <
CSS--2D和3D效果
qq_27150223的博客
02-08 184
2D变形 转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。 变形转换 transform 移动 translate(x, y) translate(50px,50px); 使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。 可以改变元...
一文搞懂css 2D动画效果
一个非常Cool的人
01-28 1563
讲述了css中的2d动画效果中的定位、旋转、缩放,以及过渡，合理的使用动画效果会极大地提高用户使用体验。
第二本 第九章
k123liu的博客
11-22 285
1，CSS 2D变形中有那些变形方式？各自的使用方法是什么？ 2，使用CSS3过度实现的动画效果和使用animation属性实现的动画效果有什么区别，分别如何使用？ 3，QQ彩贝高级搜索页面。 4，百度糯米购物信息导航。 5，城市街景动画。 ...
css2D、3D详解
weixin_69474694的博客
07-15 511
css2D、3D详解
使用css3实现一个大象图形
最新发布
05-24
可以使用CSS3中的伪元素和变形来实现一个大象图形。以下是一个简单的示例代码： ``` .elephant { position: relative; width: 200px; height: 150px; background-color: #ccc; } .elephant:before { content:...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值