本文详细介绍了CSS3中的2D转换属性及函数，包括transform、transform-origin等属性的应用，以及translate、scale、rotate等转换函数的具体用法，并通过一个2D旋转的例子展示了如何在网页中实现动态效果。
1.CSS3的2D转换属性
|
属性 |
描述 |
|
transform |
向元素应用2D或3D |
|
transform-origin |
允许改变被转换对象的源位置 |
2.CSS3的2D转换函数
|
函数 |
描述 |
|
matrix（n,n,n,n,n,n） |
2D，使用六个值的矩阵 |
|
translate(x,y) |
2D，沿着X和Y轴移动 |
|
translateX(n) |
2D，沿着X轴移动 |
|
translateY(n) |
2D，沿着Y轴移动 |
|
scale(x,y) |
2D，缩放对象的宽和高 |
|
scaleX(n) |
2D，缩放对象的宽 |
|
scaleY(n) |
2D，缩放对象的高 |
|
rotate(angle) |
2D，旋转角度 |
|
skew(xangle,yangle) |
2D，倾斜角度沿着X和Y |
|
skewX(angle) |
2D，沿着X轴倾斜角度 |
|
skewY(angle) |
2D，沿着Y轴倾斜角度 |
3.2D旋转，网络代码
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content－Type" content="text/html; charset=gb2312">
<title>2D旋转</title>
<style>
.rota{
width:200px;height:200px;border:1px solid red;
}
</style>
<script>
window.onload=function () {
var div=document.getElementsByTagName("div")[0];
var angle=0;
setInterval(function(){
angle++;
setCss3(div,{transform:"rotate("+angle+"deg)","transform-origin":"50% 50%"});
},60)
}
function setCss3 (obj,attrObj) {
for (var i in attrObj) {
var newi=i;
if(newi.indexOf("-")>0){
var num=newi.indexOf("-");
newi=newi.replace(newi.substr(num,2),newi.substr(num+1,1).toUpperCase());
}
obj.style[newi]=attrObj[i];
newi=newi.replace(newi.charAt(0),newi.charAt(0).toUpperCase());
obj.style["webkit"+newi]=attrObj[i];
obj.style["moz"+newi]=attrObj[i];
obj.style["o"+newi]=attrObj[i];
obj.style["ms"+newi]=attrObj[i];
}
}
</script>
</head>
<body>
<div class="rota">
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
