移动端学习笔记（四）

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>

 

posted @ 2017-07-07 17:48  波克比520  阅读(175)  评论(0)  编辑  收藏  举报