目录
CSS3 transform 属性
1、ransform 属性向元素应用 2D 或 3D 转换,该属性允许对元素进行旋转、缩放、移动或倾斜。
默认值: | none |
---|---|
继承性: | no |
版本: | CSS3 |
JavaScript 语法: | object.style.transform="rotate(7deg)" |
IE | Internet Explorer 10 + 完全支持 transform 属性 Internet Explorer 9 使用 -ms-transform 属性替代(且仅适用于 2D 转换) |
Firefox | Firefox 完全支持 transform 属性 |
Chrome | Chrome 支持替代的 -webkit-transform 属性(适用于 3D 和 2D 转换) |
Opera | Opera 支持 transform 属性,但只支持 2D 转换 |
Safari | Safari 支持替代的 -webkit-transform 属性(适用于 3D 和 2D 转换) |
2、语法:transform: none|transform-functions;
值 | 描述 | 测试 |
---|---|---|
none | 定义不进行转换。 | 测试 |
matrix(n,n,n,n,n,n) | 定义 2D 转换,使用六个值的矩阵。 | 测试 |
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换,使用 16 个值的 4x4 矩阵。 | |
translate(x,y) | 定义 2D 转换。 | 测试 |
translate3d(x,y,z) | 定义 3D 转换。 | |
translateX(x) | 定义转换,只是用 X 轴的值。 | 测试 |
translateY(y) | 定义转换,只是用 Y 轴的值。 | 测试 |
translateZ(z) | 定义 3D 转换,只是用 Z 轴的值。 | |
scale(x,y) | 定义 2D 缩放转换。 | 测试 |
scale3d(x,y,z) | 定义 3D 缩放转换。 | |
scaleX(x) | 通过设置 X 轴的值来定义缩放转换。 | 测试 |
scaleY(y) | 通过设置 Y 轴的值来定义缩放转换。 | 测试 |
scaleZ(z) | 通过设置 Z 轴的值来定义 3D 缩放转换。 | |
rotate(angle) | 定义 2D 旋转,在参数中规定角度。 | 测试 |
rotate3d(x,y,z,angle) | 定义 3D 旋转。 | |
rotateX(angle) | 定义沿着 X 轴的 3D 旋转。 | 测试 |
rotateY(angle) | 定义沿着 Y 轴的 3D 旋转。 | 测试 |
rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转。 | 测试 |
skew(x-angle,y-angle) | 定义沿着 X 和 Y 轴的 2D 倾斜转换。 | 测试 |
skewX(angle) | 定义沿着 X 轴的 2D 倾斜转换。 | 测试 |
skewY(angle) | 定义沿着 Y 轴的 2D 倾斜转换。 | 测试 |
perspective(n) | 为 3D 转换元素定义透视视图。 | 测试 |
rotate 2D 旋转
1、rotate(angle):定义 2D 旋转,rotate(旋转)单位为 deg(度),如 45deg 表示旋转 45度,90deg 表示旋转 90度。
2、以被旋转元素本身中心为轴进行旋转!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rotate 2D 旋转</title>
<style type="text/css">
.div1 {
width: 300px;
height: 200px;
background-color: #888888;
position: relative;
}
.div2 {
width: 200px;
height: 50px;
background-color: #122b40;
position: absolute;
left: calc(50% - 100px);
top: calc(50% - 25px);
/* 旋转元素,Internet Explorer 10、Firefox*/
transform: rotate(45deg);
/**浏览器兼容*/
-ms-transform: rotate(45deg); /* Internet Explorer */
-moz-transform: rotate(45deg); /* Firefox */
-webkit-transform: rotate(45deg); /* Safari 和 Chrome */
-o-transform: rotate(45deg); /* Opera */
}
</style>
<!-- JQuery CDN-->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
var rotateDeg = 45;//旋转的角度
var frameId = -1;//帧动画执行回调函数之前请求浏览器的 ID,用于取消请求
//旋转元素-动画效果
var rotateImg = function () {
console.log(frameId);
$(".div2").css("transform", "rotate(" + rotateDeg + "deg)");//设置元素 css 旋转属性,改变角度
rotateDeg += 1;//将角度加1度
frameId = requestAnimationFrame(rotateImg);//循环回调自己
};
$(function () {
//开始动画
$("#start").click(function () {
rotateImg();
});
//结束动画
$("#stop").click(function () {
cancelAnimationFrame(frameId);
});
});
</script>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
<button id="start">开始动画</button>
<button id="stop">暂停动画</button>
</body>
</html>
更多可以参考:http://www.w3school.com.cn/tiy/c.asp?f=css_transform_rotate
translate 2D 偏移
1、translate(x,y) 定义 2D 图片偏移,x 表示向右偏移,负数则向相反方向(左)偏移;y 表示向下偏移,负数则向相反方向(上)偏移。
2、单位可以是像素 px。
3、x,y 可以只使用其中一个值,如 translate(20px) 表示向 x 方向偏移20px,y 方向不变;translate(20px,20px) 表示 x 方向 y 方向同时偏移 20px。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1 {
width: 300px;
height: 200px;
background-color: #888888;
position: relative;
}
.div2 {
width: 200px;
height: 50px;
background-color: #122b40;
position: absolute;
left: 50%;
top: 50%;
/**x 方向反向偏移100px,y 方向反向偏移25px,效果就是div 正好位于 div 正中心*/
transform: translate(-100px, -25px); /*IE 10,Firefox*/
-ms-transform: translate(-100px, -25px); /* Internet Explorer 9*/
-moz-transform: translate(-100px, -25px); /* Firefox */
-webkit-transform: translate(-100px, -25px); /* Safari 和 Chrome */
-o-transform: translate(-100px, -25px); /* Opera */
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
</div>
</div>
</body>
</html>
scale 2D 缩放
1、scale(x,y) 定义 2D 缩放转换,以元素中心点进行比例缩放。
2、x,y 表示比例,无单位,如 scale(0.5,1.5) 表示 x 方向缩小 0.5 倍,y 方向大小再乘以 1.5 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scale 2D 缩放</title>
<style type="text/css">
.div1 {
width: 300px;
height: 200px;
background-color: #888888;
position: relative;
}
.div2 {
width: 200px;
height: 50px;
background-color: #122b40;
position: absolute;
left: calc(50% - 100px);
top: calc(50% - 25px);
/**x方向 缩小一半,y 方向增加一半*/
transform: scale(0.5, 1.5); /*IE 10,Firefox*/
-ms-transform: scale(0.5, 1.5); /* Internet Explorer 9*/
-moz-transform: scale(0.5, 1.5); /* Firefox */
-webkit-transform: scale(0.5, 1.5); /* Safari 和 Chrome */
-o-transform: scale(0.5, 1.5); /* Opera */
}
</style>
<!-- JQuery CDN-->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
var scale = 0.01;
var x = 0.5, y = 1.5;
var frameId = -1;
//旋转元素-动画效果
var rotateImg = function () {
console.log(frameId);
x += scale;
y += scale;
if (x > 1.5 || x < 0) {
scale = -scale;
}
$(".div2").css("transform", "scale(" + x + "," + y + ")");//设置元素 css 旋转属性,改变角度
frameId = requestAnimationFrame(rotateImg);//循环回调自己
};
$(function () {
//开始动画
$("#start").click(function () {
rotateImg();
});
//结束动画
$("#stop").click(function () {
cancelAnimationFrame(frameId);
});
});
</script>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
<button id="start">开始动画</button>
<button id="stop">暂停动画</button>
</body>
</html>
skew 2D 倾斜
1、skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换,X 与 Y 可以只使用一个
2、倾斜单位为 deg(度),skew(45deg,10deg) 表示 x 方向倾斜45度,y方向倾斜 10度;shew(45deg) 表示 x方向倾斜45度,y 方向不变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1 {
width: 300px;
height: 200px;
background-color: #888888;
position: relative;
}
.div2 {
width: 200px;
height: 50px;
background-color: #122b40;
position: absolute;
left: calc(50% - 100px);
top: calc(50% - 25px);
color: white;
/**x方向倾斜45度,y 方向不变*/
transform: skew(45deg); /*IE 10,Firefox*/
-ms-transform: skew(45deg); /* Internet Explorer 9*/
-moz-transform: skew(45deg); /* Firefox */
-webkit-transform: skew(45deg); /* Safari 和 Chrome */
-o-transform: skew(45deg); /* Opera */
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
万里长城
</div>
</div>
</body>
</html>
CSS3 filter( 滤镜)
1、filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度)。
2、滤镜主要是用来实现图像的各种特殊效果,这在 PS 上应用的尤为广泛。
默认值: | none |
---|---|
继承: | no |
动画支持: | 是。详细可查阅 CSS 动画 |
版本: | CSS3 |
JavaScript 语法: | object.style.WebkitFilter="grayscale(100%)" 尝试一下 » |
注意: 旧版 Internet Explorer 浏览器(4.0 to 8.0) 支持的非标准 "filter" 属性已被废弃。 IE8 及更低版本浏览器通常使用 opacity 属性。
CSS 语法:
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
注意: 滤镜通常使用百分比 (如:75%), 当然也可以使用小数来表示 (如:0.75)。
Filter | 描述 |
---|---|
none | 默认值,没有效果。 |
blur(px)-模糊 | 给图像设置高斯模糊。设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊; 如果没有设定值,则默认是0;参数可设置 css 长度值,不接受百分比值。 |
brightness(%)-亮度 | 给图片应用一种线性乘法,使其看起来更亮或更暗。如果值是0%,图像会全黑;值是100%,则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的,图像会比原来更亮。如果没有设定值,默认是 1。 |
contrast(%)-对比度 | 调整图像的对比度。值是0%的话,图像会全黑;值是100%,图像不变。值可以超过100%,意味着会运用更低的对比。若没有设置值,默认是1。 |
drop-shadow(h-shadow v-shadow blur spread color) -阴影 | 给图像设置一个阴影效果。阴影是合成在图像下面,可以有模糊度的,可以以特定颜色画出的遮罩图的偏移版本。 函数接受<shadow>(在CSS3背景中定义)类型的值,除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似;不同之处在于,通过滤镜,一些浏览器为了更好的性能会提供硬件加速。
|
grayscale(%)-灰度级 | 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0; |
hue-rotate(deg)-色相旋转 | 给图像应用色相旋转。"设定图像会被调整的色环角度值。值为0deg,则图像无变化。若值未设置,默认值是0deg。该值虽然没有最大值,超过360deg的值相当于又绕一圈。 |
invert(%)-反转 | 反转输入图像。值定义转换的比例。100%是完全反转。值为0%则图像无变化。值在0%和100%之间,则是效果的线性乘子。 若值未设置,值默认是0。 |
opacity(%)-不透明度 | 转化图像的透明程度。值定义转换的比例。值为0%则是完全透明,值为100%则图像无变化。值在0%和100%之间,则是效果的线性乘子,也相当于图像样本乘以数量。 若值未设置,值默认是1。该函数与已有的opacity属性很相似,不同之处在于通过filter,一些浏览器为了提升性能会提供硬件加速。 |
saturate(%)-饱和度 | 转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和,值为100%则图像无变化。其他值,则是效果的线性乘子。超过100%的值是允许的,则有更高的饱和度。 若值未设置,值默认是1。 |
sepia(%)-乌贼墨 | 将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0; |
url() | URL函数接受一个XML文件,该文件设置了 一个SVG滤镜,且可以包含一个锚点来指定一个具体的滤镜元素。 例如:filter: url(svg-url#element-id) |
initial | 设置属性为默认值,可参阅: CSS initial 关键字 |
inherit | 从父元素继承该属性,可参阅:CSS inherit 关键字 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Filter 滤镜</title>
<style>
.imgDiv {
width: 200px;
border: 2px solid gold;
display: inline-block;
text-align: center;
}
.imgDiv > img {
min-width: 90%;
max-width: 90%;
}
/*设置高斯模糊 4 像素*/
.blur {
-webkit-filter: blur(4px);/* Chrome, Safari, Opera */
filter: blur(4px);
}
/*设置明亮度为原来的 30%,则图像更暗*/
.brightness {
-webkit-filter: brightness(0.30);/* Chrome, Safari, Opera */
filter: brightness(0.30);
}
/*设置对比度 180%,则图像对比度更强*/
.contrast {
-webkit-filter: contrast(180%);/* Chrome, Safari, Opera */
filter: contrast(180%);
}
/*给图像设置阴影效果,水平阴影长度为 4px,垂直阴影长度为8px,纵深阴影长度为 16px,颜色为绿色*/
.shadow {
-webkit-filter: drop-shadow(4px 8px 16px black);/* Chrome, Safari, Opera */
filter: drop-shadow(4x 8px 16px black);
}
/*将图像转换为灰度图像,100%则完全转为灰度图像,即图像为黑白照*/
.grayscale {
-webkit-filter: grayscale(100%);/* Chrome, Safari, Opera */
filter: grayscale(100%);
}
/*图像应用色相旋转,旋转 180度*/
.huerotate {
-webkit-filter: hue-rotate(180deg);/* Chrome, Safari, Opera */
filter: hue-rotate(180deg);
}
/*反转输入图像,100%是完全反转*/
.invert {
-webkit-filter: invert(100%);/* Chrome, Safari, Opera */
filter: invert(100%);
}
/*转化图像的透明程度,0 表示完全透明*/
.opacity {
-webkit-filter: opacity(50%);/* Chrome, Safari, Opera */
filter: opacity(50%);
}
/*转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和*/
.saturate {
-webkit-filter: saturate(7);/* Chrome, Safari, Opera */
filter: saturate(7);
}
/*将图像转换为深褐色,100%则完全是深褐色*/
.sepia {
-webkit-filter: sepia(100%);/* Chrome, Safari, Opera */
filter: sepia(100%);
}
</style>
</head>
<body>
<div class="imgDiv">
<img src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=af18103e1cdfa9ecfd2e51115aeb903e/b03533fa828ba61ef518ba0d4c34970a304e5919.jpg">
<div>原图</div>
</div>
<div class="imgDiv">
<img class="blur" src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=af18103e1cdfa9ecfd2e51115aeb903e/b03533fa828ba61ef518ba0d4c34970a304e5919.jpg">
<div>高斯模糊 4 像素</div>
</div>
<div class="imgDiv">
<img class="brightness" src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=af18103e1cdfa9ecfd2e51115aeb903e/b03533fa828ba61ef518ba0d4c34970a304e5919.jpg">
<div>设置明亮度为原来的 30%</div>
</div>
<div class="imgDiv">
<img class="contrast" src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=af18103e1cdfa9ecfd2e51115aeb903e/b03533fa828ba61ef518ba0d4c34970a304e5919.jpg">
<div>设置对比度为原来的 180%</div>
</div>
<br>
<div class="imgDiv">
<img class="shadow" src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=af18103e1cdfa9ecfd2e51115aeb903e/b03533fa828ba61ef518ba0d4c34970a304e5919.jpg">
<div>给图像设置阴影效果</div>
</div>
<div class="imgDiv">
<img class="grayscale" src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=af18103e1cdfa9ecfd2e51115aeb903e/b03533fa828ba61ef518ba0d4c34970a304e5919.jpg">
<div>将图像转换为灰度图像</div>
</div>
<div class="imgDiv">
<img class="huerotate" src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=af18103e1cdfa9ecfd2e51115aeb903e/b03533fa828ba61ef518ba0d4c34970a304e5919.jpg">
<div>图像色相旋转 180度</div>
</div>
<div class="imgDiv">
<img class="invert" src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=af18103e1cdfa9ecfd2e51115aeb903e/b03533fa828ba61ef518ba0d4c34970a304e5919.jpg">
<div>反转输入图像</div>
</div>
<br>
<div class="imgDiv">
<img class="opacity" src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=af18103e1cdfa9ecfd2e51115aeb903e/b03533fa828ba61ef518ba0d4c34970a304e5919.jpg">
<div>转化图像的透明度为50%</div>
</div>
<div class="imgDiv">
<img class="saturate" src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=af18103e1cdfa9ecfd2e51115aeb903e/b03533fa828ba61ef518ba0d4c34970a304e5919.jpg">
<div>图像饱和度为原来的7倍</div>
</div>
<div class="imgDiv">
<img class="sepia" src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=af18103e1cdfa9ecfd2e51115aeb903e/b03533fa828ba61ef518ba0d4c34970a304e5919.jpg">
<div>将图像转换为深褐色</div>
</div>
</body>
</html>