5.8 (案例) matrix

matrix.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>skew</title>
    <style type="text/css">
    div{
        width:200px;
        height: 100px;
        background: -webkit-linear-gradient(left,orange 30%,red 100%);
        margin: 50px;
        transition: 1s all ease;
    }
    div:nth-child(2){
        transform:matrix(0.8,0,0.707,1,0,0);
        /*
        matrix(a,c,e,b,d,f)
        a : scaleX();
        c : skewY()  ==>  sin(角度) = 0.5   角度 30deg
        e ：skewX(45deg) ==> sin(45)  = 0.707  ===>  45deg
        b ：scaleY()
        d : translateX();
        f : translateY();

                */
    }
    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 雨前
    天阴了乌云从四面八方涌到一起而窗外梧桐正在与叶子做最后的告别
    叶知谓阅读 147评论 0赞 2
  • 朋友大过天
    所有在乎的不在乎的都已远去 那些有的没有从未留成记忆 走的走了，散就散了 中间的鸿沟无法逾越 你和我 各自站在两端...
    尼鱼阅读 159评论 0赞 0
  • 周末时光
    周末回奶奶家，见到了很多同村的人。他们跟爷爷奶奶，爸爸妈妈都是很熟很熟的人，但对我而言，比较陌生，因为接触的不多，...
    思诺彩虹阅读 436评论 0赞 1
  • 0410晨读领悟－桔惠
    第一步，选择目标、做足准备 1小时之内完成一篇500＋字，有思路和条理的领悟文章。 准备：1)补充文字基础 2)关...
    桔惠上海阅读 110评论 2赞 2
  • 姐姐 12.9.16
    今天早上还是没早起 ，不能更郁闷。以后一定十二点准时睡觉，早上最迟八点起床，否则真是满满都是罪恶感啊！我不要这样的...
    最佳姐妹阅读 217评论 0赞 1