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>