移动端学习笔记

Posted 波克比520

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端学习笔记相关的知识,希望对你有一定的参考价值。

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>

 

以上是关于移动端学习笔记的主要内容,如果未能解决你的问题,请参考以下文章

移动端学习笔记

移动端学习笔记

移动端学习笔记

HTML5与移动端web学习笔记

移动端学习笔记(viewport)

学习笔记:python3,代码片段(2017)