transform
transform 变换 -webkit-transform
rotate 旋转 deg
skew 斜切 skewX skewY
scale 缩放 (原始大小的多少倍)(x,y) scaleX scaleY
translate 位移 translateX translateY
transform-origin: center center;
关键字
百分比
距离单位(px,em,rem...)
多个属性连写时，先写的后执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no" />
<title>Document</title>
<style type="text/css">
#box {width: 100px; height: 100px; border: 1px solid #000; padding: 100px; }
#div {width: 100px; height: 100px; background: red; transition: 1s; }
</style>
<script type="text/javascript">
document.addEventListener(‘touchstart‘,function(e){
// 阻止默认事件
e.preventDefault();
});
window.onload = function(){
// 移动端获取元素： querySelector()
var oDiv = document.querySelector(‘#div‘);
oDiv.addEventListener(‘touchend‘,function(){
// this.style.webkitTransform = this.style.transform = ‘rotate(360deg)‘;
// this.style.webkitTransform = this.style.transform = ‘skew(-40deg,-40deg)‘;
// this.style.webkitTransform = this.style.transform = ‘scale(.5,2)‘;
// this.style.webkitTransform = this.style.transform = ‘translate(100px,100px)‘;
this.style.webkitTransform = this.style.transform = ‘translateX(100px) scale(.5)‘;
});
};
</script>
</head>
<body>
<div id="box">
<div id="div"></div>
</div>
</body>
</html>
矩阵
matrix(1, 0, 0, 1, 0, 0) 矩阵
matrix(a, b, c, d, e, f)
位移：
x轴位移 = e + x;
y轴位移 = f + y;
缩放：
x轴:
a = a*x;
c = c*x;
e = e*x;
y轴:
b = b*x;
d = d*x;
f = f*x;
先位移，再缩放：
位移-matrix(1, 0, 0, 1, 100, 100)
缩放-matrix(.5, 0, 0, .5, 50, 50)
先缩放，再位移：
缩放-matrix(.5, 0, 0, .5, 0, 0)
位移-matrix(.5, 0, 0, .5, 100, 100)
斜切：
x斜切：(deg)
c = Math.tan(30/180*Math.PI);
y斜切：(deg)
b = Math.tan(30/180*Math.PI);
角度转弧度 = deg*Math.PI/180
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no" />
<title>Document</title>
<style type="text/css">
#box {width: 100px; border: 1px solid #000; padding: 100px; }
.div {width: 100px; height: 100px; margin: 10px 0; background: red; -webkit-transform-origin: 0 0; transform-origin: 0 0; }
</style>
<script type="text/javascript">
document.addEventListener(‘touchstart‘, function(e) {
e.preventDefault();
});
window.onload = function(){
//console.log(30*Math.PI/180);
var a = 1;
var b = 0;
var c = 0;
var d = 1;
var div = document.querySelectorAll(‘.div‘);
b = Math.tan(30*Math.PI/180);
div[0].style.WebkitTransform = div[0].style.transform = "skewY(30deg)";
console.log(getComputedStyle(div[0])["transform"]);
div[1].style.WebkitTransform = div[1].style.transform = " matrix("+a+", "+b+", "+c+", "+d+", 0, 0)";
console.log(getComputedStyle(div[1])["transform"]);
};
</script>
</head>
<body>
<div id="box">
<div class="div"></div>
<div class="div"></div>
</div>
</body>
</html>
三角函数
正弦：Math.sin
余弦：Math.cos
正切：Math.tan
角度转弧度：角度转弧度 = deg*Math.PI/180
<script type="text/javascript">
console.log(Math.sin(30*Math.PI/180));
console.log(Math.cos(30*Math.PI/180));
console.log(Math.tan(30*Math.PI/180));
</script>
3D变换
rotateX/rotateY/rotateZ/rotate3d
translateX/translateY/translateZ/translate3d
perspective 景深(我在多远之外来看这个元素)
加给要做3d变换的元素的父级
transform-style 元素在做3d变换时，是否保留子元素的3d变换
flat 不保留
preserve-3d 保留子元素3D变换
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,user-scalable=no">
<style>
#box{ width: 100px; height: 100px; border: 1px solid #ddd; padding: 100px; -webkit-perspective: 200px; perspective: 200px; perspective-origin: left top;}
#div{ width: 100px; height: 100px; background: red; -webkit-transition: all 1s; transition: all 1s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;}
#div span{ display: block; width: 100px; height: 100px; background: green; -webkit-transform: rotateX(60deg); transform: rotateX(60deg);}
</style>
<script>
document.addEventListener(‘touchstart‘,function(e){
e.preventDefault();
});
window.onload = function(){
var oDiv = document.querySelector(‘#div‘);
oDiv.addEventListener(‘touchend‘,function(){
this.style.WebkitTransform = this.style.transform = ‘rotateY(-360deg)‘;
});
};
</script>
</head>
<body>
<div id="box">
<div id="div">
<span></span>
</div>
</div>
</body>
</html>