形变#

2D形变#

matrix()：
以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵
translate()：
指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
translatex()：
指定对象X轴（水平方向）的平移
translatey()：
指定对象Y轴（垂直方向）的平移
rotate()：
指定对象的2D rotation（2D旋转），需先有 <' transform-origin '> 属性的定义
scale()：
指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
scalex()：
指定对象X轴的（水平方向）缩放
scaley()：
指定对象Y轴的（垂直方向）缩放
skew()：
指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
skewx()：
指定对象X轴的（水平方向）扭曲
skewy()：
指定对象Y轴的（垂直方向）扭曲　

运用实例#

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>2d形变</title>
    <style type="text/css">
        div {
            width: 50px;
            height: 50px;
            background-color: red;
            margin: 30px auto 0;
            text-align: center;
            line-height: 50px;
            transition: 3s;
             
            /*形变参考点: 三轴交界点*/
            /*transform-origin: 0 0;*/
        }
        .d1 {
            /*形变: 只操作自身显示图层(让图层发生变化), 不影响盒子布局*/
            /*注: 不拿形变来布局, 只能形变来完成动画*/
            /*transform: rotate(45deg);*/
            /*transform: scale(3);*/
            /*transform: translateY(100px);*/
            /*margin-top: 50px;*/
        }
 
         
        .d2:hover {
            /*旋转: 旋转的是角度 deg*/
            /*transform: rotate(720deg);*/
            transform: rotateZ(7200deg);
        }
        .d3:hover {
            transform: rotateY(7200deg);
        }
 
        .d4:hover {
            /*偏移: 偏移的是距离 px*/
            /*如果需要发送多状态形变,需要分别写在一条transform属性设置中*/
            /*各个形变之间用空格隔开*/
            /*顺序一般会影响结果*/
            /*transform: translateY(100px) translateX(100px);*/
             
            /*不能这么书写: 所有形变效果的实现都是对transform一个属性进行设置*/
            /*下方这么设置,第二次赋值会覆盖第一次赋值(只能保留最后一次赋值)*/
            transform: translateX(100px);
            transform: translateY(100px);
        }
        .d5:hover {
            transform: translateX(100px) rotate(7200deg);
            /*transform: rotate(7200deg) translateX(100px);*/
        }
        .d6:hover {
            /*缩放: 缩放的是比例 无单位*/
            transform: scale(3, 0.5);
            /*transform: scaleX(3) scaleY(0.5);*/
        }
        .d7:hover {
            transform: translateX(100px) rotate(720deg) scale(2);
        }
        .d8:hover {
            margin-left: 1200px;
        }
    </style>
</head>
<body>
    <div class="d1">1</div>
    <div class="d2">2</div>
    <div class="d3">3</div>
    <div class="d4">4</div>
    <div class="d5">5</div>
    <div class="d6">6</div>
    <div class="d7">7</div>
    <div class="d8"></div>
</body>
</html>

小米形变案例#

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>小米形变案例</title>
    <style type="text/css">
        .wrapper {
            width: 230px;
            height: 300px;
            background-color: #ddd;
            margin: 50px auto;
        }
        .box {
            width: 230px;
            height: 300px;
            background-color: yellow;
            transition: .3s;
            position: relative;
        }
        .footer {
            width: 230px;
            height: 0;
            overflow: hidden;
            background-color: red;
            transition: .3s;
            position: absolute;
            bottom: 0;
        }
        .wrapper:hover .box {
            transform: translateY(-5px);
            box-shadow: 0 5px 10px 2px #ddd;
        }
        .wrapper:hover .footer {
            height: 80px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box">
            <div class="footer">12345</div>
        </div>
    </div>
</body>
</html>

3d形变#

matrix3d()：
以一个4x4矩阵的形式指定一个3D变换
translate3d()：
指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
translatez()：
指定对象Z轴的平移
rotate3d()：
指定对象的3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z，第4个参数表示旋转的角度，参数不允许省略
rotatex()：
指定对象在x轴上的旋转角度
rotatey()：
指定对象在y轴上的旋转角度
rotatez()：
指定对象在z轴上的旋转角度
scale3d()：
指定对象的3D缩放。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
scalez()：
指定对象的z轴缩放
perspective()：
指定透视距离

回到顶部

动画#

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style type="text/css">
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-left: 200px;
            margin-top: 50px;
        }
        /*实现动画*/
        /*1.设置动画体*/
        /*2.设置动画属性*/
         
        /*1.设置动画体
        @keyframes 动画名 {
            多种状态的动画体
        }
        */
        /*2.设置动画属性
        .box {
            animation: 动画相关属性;
        }
        */
        @keyframes hehe {
            /*起点省略采用的就是初始状态*/
            0% {}
            33.3% {
                margin-left: 800px;
                margin-top: 50px;
            }
            66.6% {
                margin-left: 500px;
                margin-top: 300px;
            }
            /*终点需要设置*/
            100% {
                margin-left: 200px;
                margin-top: 50px;
            }
        }
        .box {
            /*animation: 动画名 时间 运动次数(无限次:infinite) 运动曲线*/
            animation: hehe 2s 1 linear;
        }
 
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

更及详细的请参考CSS参考手册 http://css.doyoe.com/

posted @ 2018-12-14 19:14 鲸鱼的海老大阅读(328) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架

公告

昵称：鲸鱼的海老大
园龄： 7年1个月
粉丝： 2
关注： 8

+加关注

2025年3月

日

一

二

三

四

五

六

不积跬步无以至千里

CSS形变与动画

形变#

2D形变#

运用实例#

小米形变案例#

3d形变#

动画#

公告

搜索

常用链接

我的标签

积分与排名

随笔分类

相册

阅读排行榜

评论排行榜

最新评论