7:----(2) CSS3中的变形--扭曲 skew()
来源:互联网 发布:php集成开发环境 编辑:程序博客网 时间:2024/05/14 07:01
CSS3中的变形--扭曲 skew()
扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同,rotate()函数只是旋转,而不会改变元素的形状。skew()函数不会旋转,而只会改变元素的形状。
Skew()具有三种情况: x , y的值应该是写角度
1、skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形);
第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则值为0,也就是Y轴方向上无斜切。
2、skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形);
3、skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形)
示例演示:
通过skew()函数将长方形变成平行四边形。
.wrapper {
width:300px;
height:100px;
border: 2pxdotted red;
margin: 0auto;
}
.wrapper div {
width:300px;
height:100px;
line-height: 100px;
text-align:center;
color:#fff;
background:orange;
transform:skew(45deg);
}
CSS3中的变形--缩放 scale()
缩放 scale()函数 让元素根据中心原点对对象进行缩放。
缩放 scale 具有三种情况:
1、 scale(X,Y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)
例如:
div:hover {
-webkit-transform: scale(1.5,0.5);
-moz-transform:scale(1.5,0.5)
transform:scale(1.5,0.5);
}
注意:Y是一个可选参数,如果没有设置Y值,则表示X,Y两个方向的缩放倍数是一样的。
2、scaleX(x)元素仅水平方向缩放(X轴缩放)
-
3、scaleY(y)元素仅垂直方向缩放(Y轴缩放)
.wrapper {
width:200px;
height:200px;
border:2pxdashed red;
margin: 0auto;
}
.wrapper div {
width:200px;
height:200px;
line-height: 200px;
background:orange;
text-align:center;
color:#fff;
}
.wrapper div:hover {
opacity:.5;
-webkit-transform: scale(1.5);
-moz-transform:scale(1.5)
transform:scale(1.5);
}
***相关代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style> .div3 { width: 200px; height: 200px; background-color: aqua; transform: skew(30deg, 30deg); } .div4 { width: 200px; height: 200px; background-color: yellow; transform: matrix(30deg); } .div5 { width: 200px; height: 200px; background-color: blue; transform: skewY(4deg); } img { transform: skew(45deg, 30deg); }</style><body> <div class="div3">扭曲盒子</div> <div class="div4">仅x轴方向扭曲</div> <div class="div5">仅y轴方向扭曲</div> <img src="201101asdsaf22135412367.png" alt=""></body></html>***先关效果
- 7:----(2) CSS3中的变形--扭曲 skew()
- 【CSS3】变形--扭曲 skew()
- 变形--扭曲 skew()
- css3 skew变形
- CSS3中的2D变形
- 7:----(4) CSS3中的变形--位移 translate()
- 7:---(3)CSS3中的变形--缩放 scale()
- css3中的变形和动画(3)
- CSS3中的变形与动画(下)
- CSS3中的变形与动画(上)
- CSS3中的变形与动画(下)
- CSS3中的transform变形
- CSS3中的transform变形
- CSS3中的transform变形
- CSS3中的变形处理
- CSS3中的变形
- CSS3的2D变换属性:skew()
- css3 2d skew()方法用法理解
- better-scroll插件初使用
- Mac 破解CrossOver的方法
- Mac mysql shell
- iOS
- 最短的名字 CSU
- 7:----(2) CSS3中的变形--扭曲 skew()
- Treasure Exploration 【传递闭包】+【最小顶点覆盖】
- python中的datetime模块
- Hadoop海量存储之HDFS基础入门(笔记2)
- 如何阅读别人的源代码
- 图像滤波---双边滤波和引导滤波的基本原理
- 拉格朗日乘数法
- svn的使用
- spring boot web开发中模拟发送http请求的前端单元测试方法