html倾斜变形,浅谈CSS3中的变形功能-transform功能

于 2021-06-09 21:37:02 发布
阅读量747 收藏 1
点赞数 1
文章标签： html倾斜变形

CSS3中的变形功能：在CSS3中可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动着四种类型的变形功能。

1、如何使用transform功能：

(1)在CSS3中通过transform属性来实现transform功能：

(2)transform功能使用方法：

transform:功能;

-ms-transform:功能;/*IE9*/

-moz-transform:功能;/*Firefox*/

-webkit-transform:功能;/*Safari和chrome*/

-o-transform:功能;/*Opera*/

2、rotate旋转，在参数中规定角度(rotate表示的是顺时针旋转，deg是CSS3中的角度单位)：

(1)使用方法：

-ms-transform:rotate(角度);/*IE9*/

-moz-transform:rotate(角度);/*Firefox*/

-webkit-transform:rotate(角度);/*Safari和chrome*/

-o-transform:rotate(角度);/*Opera*/

(2)rotate旋转的应用：

1)HTML代码：

2)CSS代码：

div{

width: 300px;

height: 300px;

background-color: lightblue;

-ms-transform:rotate(45deg);/*IE9*/

-moz-transform:rotate(45deg);/*Firefox*/

-webkit-transform:rotate(45deg);/*Safari和chrome*/

-o-transform:rotate(45deg);/*Opera*/

}

3)效果图如下：

62f460375ef90f7a8c1656ed058cc6b1.png

3、scale缩放转换：

(1)使用方法：transform:scale(值)，他的值是指定的缩放倍率，比如0.5就是缩放50%，1就是缩放100%，1.5就是缩放150%；

-ms-transform:scale(值);/*IE9*/

-moz-transform:scale(值);/*Firefox*/

-webkit-transform:scale(值);/*Safari和chrome*/

-o-transform:scale(值);/*Opera*/

(2)可能的值：

1)scale(x,y)使元素X轴和Y轴同时缩放；

2)scale(x)使元素仅X轴缩放；

3)scale(y)使元素仅Y轴缩放；

(3)scale缩放转换的应用：

1)HTML代码：

2)CSS代码：

div{

width: 300px;

height: 300px;

background-color: lightblue;

/*缩放值X与Y为正整数时*/

-ms-transform:scale(2,2);/*IE9*/

-moz-transform:scale(2,2);/*Firefox*/

-webkit-transform:scale(2,2);/*Safari和chrome*/

-o-transform:scale(2,2);/*Opera*/

/*缩放值X与Y均为小于1的浮点数时*/

/*-ms-transform:scale(0.5,0.5);*//*IE9*/

/*-moz-transform:scale(0.5,0.5);*//*Firefox*/

/*-webkit-transform:scale(0.5,0.5);*//*Safari和chrome*/

/*-o-transform:scale(0.5,0.5);*//*Opera*/

/*缩放值仅X为小于1的浮点数时*/

/*-ms-transform:scaleX(0.5);*//*IE9*/

/*-moz-transform:scaleX(0.5);*//*Firefox*/

/*-webkit-transform:scaleX(0.5);*//*Safari和chrome*/

/*-o-transform:scaleX(0.5);*//*Opera*/

/*缩放值仅Y为小于1的浮点数时*/

/*-ms-transform:scaleY(0.5);*//*IE9*/

/*-moz-transform:scaleY(0.5);*//*Firefox*/

/*-webkit-transform:scaleY(0.5);*//*Safari和chrome*/

/*-o-transform:scaleY(0.5);*//*Opera*/

}

3)效果图如下：

①未缩放时的效果图：

a298947fb60aa2ceeb3da0707db415e3.png

②缩放值X与Y为正整数时的效果图：

af8a6fc03d66ca9b2eb795cb1bb7b23b.png

③缩放值X与Y均为小于1的浮点数时的效果图：

802fa0e1d70d72ba3ea2c87fc0e15165.png

④缩放值仅X为小于1的浮点数时的效果图：

3a2bc0cd5a1d62263972b993bbfea1b7.png

⑤缩放值仅Y为小于1的浮点数时的效果图：

ba64b8a99ad42b63b64b332e4c86277f.png

4、倾斜skew：

(1)使用方法：

transform:skew(角度);它的值是角度；

-ms-transform:skew(角度);/*IE9*/

-moz-transform:skew(角度);/*Firefox*/

-webkit-transform:skew(角度);/*Safari和chrome*/

-o-transform:skew(角度);/*Opera*/

(2)可能的值：

1)skew(x,y)使元素在水平方向和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形)只有一个参数的时候，只在水平方向上倾斜；

2)skewX(x)仅使元素在水平方向上扭曲变形(X轴扭曲变形)

3)skewY(y)仅使元素在垂直方向上扭曲变形(Y轴扭曲变形)

(3)倾斜skew的应用：

1)HTML代码：

2)CSS代码：

div{

width: 300px;

height: 300px;

background-color: lightblue;

/*X轴与Y轴均倾斜*/

-ms-transform:skew(30deg,30deg);

-moz-transform:skew(30deg,30deg);

-webkit-transform:skew(30deg,30deg);

-o-transform:skew(30deg,30deg);

/*设置一个值相当于仅X轴倾斜*/

/*-ms-transform:skew(30deg);*//*IE9*/

/*-moz-transform:skew(30deg);*//*Firefox*/

/*-webkit-transform:skew(30deg);*//*Safari和chrome*/

/*-o-transform:skew(30deg);*//*Opera*/

/*仅X轴倾斜*/

/*-ms-transform:skewX(30deg);*//*IE9*/

/*-moz-transform:skewX(30deg);*//*Firefox*/

/*-webkit-transform:skewX(30deg);*//*Safari和chrome*/

/*-o-transform:skewX(30deg);*//*Opera*/

/*仅Y轴倾斜*/

/*-ms-transform:skewY(30deg);*//*IE9*/

/*-moz-transform:skewY(30deg);*//*Firefox*/

/*-webkit-transform:skewY(30deg);*//*Safari和chrome*/

/*-o-transform:skewY(30deg);*//*Opera*/

}

3)效果图如下：

①未倾斜的效果图：

4cfb7cc6ef2f1d6346660b30b10416e8.png

②X轴与Y轴均倾斜的效果图：

ec311fb3bdabee1ee6905b95a2b5f835.png

③设置一个值相当于仅X轴倾斜的效果图：

a05edccda31074c8cd0a2b0444f88989.png

④仅X轴倾斜的效果图：

14d8162fa909d0cc2f10c57d3c946a8d.png

⑤仅Y轴倾斜的效果图：

e91cac46624b3fd2c762d1cd87ae61e5.png

5、移动translate：

(1)使用方法：

transform:translate(值);它的值是指定移动的距离；

-ms-transform:translate(值);/*IE9*/

-moz-transform:translate(值);/*Firefox*/

-webkit-transform:translate(值);/*Safari和chrome*/

-o-transform:translate(值);/*Opera*/

(2)可能的值：

1)translate(x,y)水平方向与垂直方向同时移动(也就是X轴和Y轴同时移动)只有一个参数的时候，只在水平方向上移动；

2)translateX(x)仅水平方向(X轴移动)

3)translateY(y)仅垂直方向(Y轴移动)

(3)移动translate的应用：

1)HTML代码：

2)CSS代码：

.main{

width: 100%;

height: 500px;

background-color: lightcoral;

}

.div{

width: 300px;

height: 300px;

background-color: lightblue;

/*在X轴与Y轴上均移动*/

-ms-transform:translate(50px,50px);/*IE9*/

-moz-transform:translate(50px,50px);/*Firefox*/

-webkit-transform:translate(50px,50px);/*Safari和chrome*/

-o-transform:translate(50px,50px);/*Opera*/

/*设置一个值相当于仅在X轴上移动*/

/*-ms-transform:translate(50px);*//*IE9*/

/*-moz-transform:translate(50px);*//*Firefox*/

/*-webkit-transform:translate(50px);*//*Safari和chrome*/

/*-o-transform:translate(50px);*//*Opera*/

/*仅在X轴上移动*/

/*-ms-transform:translateX(50px);*//*IE9*/

/*-moz-transform:translateX(50px);*//*Firefox*/

/*-webkit-transform:translateX(50px);*//*Safari和chrome*/

/*-o-transform:translateX(50px);*//*Opera*/

/*仅在Y轴上移动*/

/*-ms-transform:translateY(50px);*//*IE9*/

/*-moz-transform:translateY(50px);*//*Firefox*/

/*-webkit-transform:translateY(50px);*//*Safari和chrome*/

/*-o-transform:translateY(50px);*//*Opera*/

}

3)效果图如下：

①未移动的效果图：

94127faab48dd8e715d21cf7d94de7b5.png

②在X轴与Y轴上均移动时的效果图：

b020a81e18966f1ef34fb2e756ffe0aa.png

③设置一个值相当于仅在X轴上移动时的效果图：

f6325e972d926c71041c49f7e68c8749.png

④仅在X轴上移动时的效果图：

01f157cb07fdb16d709a5e280c95034a.png

⑤仅在Y轴上移动时的效果图：

9db6c44757946842ba4ec369d18093e4.png

6、对一个元素使用多种变形方法：(同样的方法只能使用一次)

(1)使用方法：

transform:方法1 方法2 方法3 方法4;

-ms-transform:方法1 方法2 方法3 方法4;/*IE9*/

-moz-transform:方法1 方法2 方法3 方法4;/*Firefox*/

-webkit-transform:方法1 方法2 方法3 方法4;/*Safari和chrome*/

-o-transform:方法1 方法2 方法3 方法4;/*Opera*/

(2)对一个元素使用多种变形方法的应用：

1)HTML代码：

2)CSS代码：

.main{

width: 100%;

height: 500px;

background-color: lightcoral;

}

.div{

width: 300px;

height: 300px;

background-color: lightblue;

-ms-transform:translateX(200px) rotate(30deg) skew(30deg,30deg) scaleY(0.5);/*IE9*/

-moz-transform:translateX(200px) rotate(30deg) skew(30deg,30deg) scaleY(0.5);/*Firefox*/

-webkit-transform:translateX(200px) rotate(30deg) skew(30deg,30deg) scaleY(0.5);/*Safari和chrome*/

-o-transform:translateX(200px) rotate(30deg) skew(30deg,30deg) scaleY(0.5);/*Opera*/

}

3)效果图如下：

①未添加方法时的效果图：

24d227e9e6f70ac7b7d788f24ecdf296.png

②添加了多种方法时的效果图：

a60d661653a52093465a51e9d8301018.png

7、改变元素基点transform-origin：

(1)可能的值：

top left

top

right top

left

center

right

bottom left

bottom

bottom right

(2)默认情况下transform属性变化的基点是center，但是可以通过transform-origin改变transform属性变化的基点；

(3)改变元素基点transform-origin的应用：

1)HTML代码：

2)CSS代码：

.main{

width: 100%;

height: 500px;

background-color: lightcoral;

margin-left: 140px;

margin-top: 180px;

}

.div{

width: 300px;

height: 300px;

background-color: lightblue;

-ms-transform:rotate(30deg);/*IE9*/

-moz-transform:rotate(30deg);/*Firefox*/

-webkit-transform:rotate(30deg);/*Safari和chrome*/

-o-transform:rotate(30deg);/*Opera*/

transform-origin: center;

/*transform-origin: top;*/

/*transform-origin: top left;*/

/*transform-origin: right top;*/

/*transform-origin: left;*/

/*transform-origin: right;*/

/*transform-origin: bottom left;*/

/*transform-origin: bottom;*/

/*transform-origin: bottom right;*/

}

3)效果图如下：

①未添加变形功能的效果图：

6f28507eeaa74d134e7cc55ce440931a.png

②添加旋转功能的效果图：

120f127f14ba4d2ef0b32e7b1e7cadb3.png

③以center为基点旋转的效果图：

120f127f14ba4d2ef0b32e7b1e7cadb3.png

④以top为基点旋转的效果图：

8a983f9a8019c629084d84e7f20b7ed4.png

⑤以top left为基点旋转的效果图：

80db4e53350ac103efe1013c00e50d15.png

⑥以right top为基点旋转的效果图：

0b20297d0949959189de94928c4873ca.png

⑦以left为基点旋转的效果图：

789440d520f6b8d6e92e77faad0303fe.png

⑧以right为基点旋转的效果图：

774627016e112de6b39cc49c81c7aa07.png

⑨以bottom left为基点旋转的效果图：

759ae05fbce07c0cde3ca2eea37ca678.png

⑩以bottom为基点旋转的效果图：

183c34b561527f02fccc441d85b3d11c.png

⑪以bottom right为基点旋转的效果图：

357a14af146ea998c7e0276d94d144d0.png

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值