CSS3之过渡及2D变换分分快三计划

作者:分分快三计划

例:transition:1s width,2s 1s height,3s 3s background;

transform 将成分举办2D或3D调换
  • rotate(90deg) 旋转函数 取值度数
    • deg 度数
    • transform-origin:x y 旋转的主体
<style>
    div {
        width: 100px;
        height: 100px;
        background-color: pink;
        transform: rotate(0deg);
        transition: 3s;
        margin: 100px auto;
        transform-origin: 0 0;
    }

    div:hover {
        transform: rotate(160deg);
    }
</style>

分分快三计划 1

image.png

  • skew(90deg) 倾斜函数 取值度数
    • skewX()
    • skewY()
<style>
    div {
        width: 100px;
        height: 100px;
        background-color: pink;
        transform: skew(0deg);
        transition: 3s;
        margin: 100px auto;
        transform-origin: 0 0;
    }

    div:hover {
        transform: skewY(60deg);
    }
</style>

分分快三计划 2

image.png

  • scale(2) 缩放函数 取值 正数、负数和小数
    • scaleX()
    • scaleY()
<style>
    div {
        width: 100px;
        height: 100px;
        background-color: pink;
        transform: scale(1);
        transition: 3s;
        margin: 100px auto;
    }

    div:hover {
        transform: scale(20);
    }
</style>
  • translate() 位移函数
    • translateX()
    • translateY()
<style>
    div {
        width: 100px;
        height: 100px;
        background-color: pink;
        transform: translate(0);
        transition: 3s;
        margin: 100px auto;
    }

    div:hover {
        transform: translateY(200px);
    }
</style>
  • matrix(a,b,c,d,e,f) 矩阵函数

    • 透过矩阵完结缩放

      • x轴缩放 a=xa c=xc e=x*e;
      • y轴缩放 b=yb d=yd f=y*f;
    • 通过矩阵落成位移

      • x轴位移: e=e x
      • y轴位移: f=f y
    • 透过矩阵达成偏斜

      • x轴倾斜: c=Math.tan(xDeg/180*Math.PI)
      • y轴倾斜: b=Math.tan(yDeg/180*Math.PI)
    • 通过矩阵达成旋转

      • a=Math.cos(deg/180*Math.PI);
      • b=Math.sin(deg/180*Math.PI);
      • c=-Math.sin(deg/180*Math.PI);
      • d=Math.cos(deg/180*Math.PI);
    • 转变宽容IE9以下IE版本只可以通过矩阵来促成

      • filter: progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod='auto expand');
      • IE下的矩阵未有E和F三个参数 M11==a; M12==c; M21==b; M22==d
<style>
    div {
        width: 100px;
        height: 100px;
        background-color: pink;
        transition: 3s;
        margin: 100px auto;
    }
</style>
<body>
    <div id="box">

    </div>
    <script>
        window.onload = function () {
            var box = document.getElementById("box");
            box.onclick = function () {
                var a = 1,
                    b = 0,
                    c = 0,
                    d = 1,
                    e = 0,
                    f = 0;

                var deg = 60;

                a = Math.cos(deg / 180 * Math.PI);
                b = Math.sin(deg / 180 * Math.PI);
                c = -Math.sin(deg / 180 * Math.PI);
                d = Math.cos(deg / 180 * Math.PI);

                box.style.transform = "matrix("   a   ","   b   ","   c   ","   d   ","   e   ","   f   ")"
                box.style.filter = "progid:DXImageTransform.Microsoft.Matrix( M11= "   a   ", M12= "   c   ", M21= "   b  
                    " , M22= "   d   ",SizingMethod='auto expand')";

            }

        }
    </script>
</body>

旋转
a/b/c/d协同决定旋转
a = Math.cos(deg/180*Math*PI)
b = Math.sin(deg/180*Math*PI)
c = -Math.sin(deg/180*Math*PI)
d = Math.cos(deg/180*Math*PI)
)
宽容IE6及以上 贫乏位移2个参数
progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod='auto expand');
Matrix( M11= a, M12= c, M21= b , M22=d,SizingMethod='auto expand');
(

表单天性与函数
  • placeholder : 输入框提醒新闻
  • autocomplete : 是不是保存客户输入值,默许为on,关闭提醒接收off
  • autofocus : 钦定表单获取输入宗旨
  • list和datalist : 为输入框构造八个增选列表
  • list值为datalist标签的id
  • required : 此项必填,不可能为空
  • Pattern : 正则印证 pattern="d{1,5}“
  • Formaction 在submit里定义提交地址
<body>
    <form action="https://s.taobao.com/search">
        <input type="password" placeholder="请输入密码" />
        <input type="text" name="user" autocomplete="off">
        <input type="text" name="user" autofocus="">
        <input type="text" name="user" required="">

        <input type="text" list="miaov" />
        <datalist id="miaov">
            <option value="javascript">javascript</option>
            <option value="html">html</option>
            <option value="css">css</option>
        </datalist>

        <input type="submit" />
        <input type="submit" value="保存" formaction="http://www.baidu.com" />
    </form>
</body>

在webkit内核中写法:
obj.addEventListener('WebkitTransitionEnd',fn,false);
在标准下写法:
obj.addEventListener('transitionend',fn,false);

-webkit-filter 滤镜
  • 值范围:
    • 0~1 或者 0%~100%
      灰度 -webkit-filter:grayscale(1);
      棕色调 -webkit-filter:sepia(1);
      饱和度 -webkit-filter:saturate(0.5);
      色相旋转 -webkit-filter:hue-rotate(90deg);
      反色 -webkit-filter:invert(1);
      透明度 -webkit-filter:opacity(0.2);
      亮度 -webkit-filter:brightness(0.5);
      对比度 -webkit-filter:contrast(2);
      模糊 -webkit-filter:blur(3px);
      阴影 -webkit-filter:drop-shadow(5px 5px 5px #ccc);

matrix(a,b,c,d,e,f);

-transform-origin:; 调换基点
其值可为像素也可为关键字

注:四种式同不经常间实行连接(须求异步过渡 则需在做届期间后再加三个参数:延迟时间)

transition过渡
transition-duration:; 运动时间
transition-delay:; 延迟时间
transition-timing-function:; 运动款式
          ease 渐渐变慢 (默许)
          linear 匀速
          ease-in 加速
          ease-out 减速
          ease-in-out 先加快后减速
          cubic-bezier 贝塞尔曲线(x1,y1,x2,y2) 通过调节曲线长势来改造运动作用

-transform:; 变换
rotate(30deg) 旋转 围绕成分基本点旋转30度
skewX(45deg) 斜切 沿X轴向左拉伸45度
skewY(45deg) 斜切 沿Y轴向上拉伸45度
汇总写法 skew(45deg,45deg)
scaleX(2) 缩放 由中央点沿X轴向外扩大2倍
scaleY(0.5) 缩放 由基本点沿Y轴向内降低2倍
归结写法 scale(2,0.5)
translateX(100px) 位移 从左往右移动100px
translateY(-100px) 位移 从下往上运动100px
归咎写法 translate(100px,-100px)

注:transform 实施顺序 -- 后写先实行!

matrix(1,0,0,1,0,0) 标准下 默认6个参数
(

-transform:matrix(); 矩阵
旋转 位移 缩放 斜切 都以经过matrix封装实现

注意 IE下旋转不是围绕成分基本点旋转
减轻方案:调控作而成分left/top;
left = (父级offsetWidth-本身offsetWidth)/2
top = (父级offsetHeight-本身offsetHeight)/2
)

transitionend事件(transition结束后触发的平地风波)
注意:1.每变动成分二个体制 会触发三回tranasitionend

位移
e:X轴的位移 位移的长短e x;(e,f暗中认可值为0)
f:Y轴的位移 位移的长短f y;

例:-webkit-transform:translateX(100px) scale(0.5); 与 -webkit-transform:scale(0.5) translateX(100px);

 

  第一条样式先缩放0.5倍 再试行位移100px
  第二条样式先执行活动100px 再缩放0.5倍 这时候100px会趁机缩放被缩放成50px

斜切
c同不经常候表示X轴斜切 c=Math.tan(Deg/180*Math*PI)
b同期表示Y轴斜切 b=Math.tan(Deg/180*Math*PI)

缩放
a,c,e表示X轴缩放 X轴缩放:a:a*缩放倍数 c:c*缩放倍数 e:e*缩放倍数 (e/c暗许为0);
b,d,f表示Y轴缩放 Y轴缩放:b:b*缩放倍数 d:d*缩放倍数 f:f*缩放倍数 (f/d暗许为0);

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划