transform做2d和3d变形(css动画一)

前言:这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方,请大家指正,我会持续更新!

有段时间我是没理清transform、translate、transition和animation之间的关系的,现在整理一下:

  • translate:平移;是transform的一个属性;
  • transform:变形;是一个静态属性,可以改变元素的形状或位置,做出2d或3d效果;
  • transition:过渡,转变;使css属性值在一段时间内平滑的变化,需要有触发条件(如hover等),是animation的简化版;
  • animation:动画;可以设置多帧效果,然后把它们组合变换,按动画效果展示出来;
  • transform,可设置translate(位移)  rotate(旋转)  scale(缩放)  skew(倾斜);接受多值,用空格分开,并按照从前往后的顺序执行;
  • transform-origin,可更改转换元素的基准点(默认值,元素中心,50% 50% 0);
  • transform-style,可设置flat(默认值,2d展示)还是preserve-3d(3d展示);此属性必须在transform之后使用;
  • perspective,设置元素距离视图的距离,默认为0;
  • perspective-origin,设置视点(默认值,元素中心,50% 50%),必须和perspective结合使用;
  • backface-visibility,设置元素不面向屏幕时是否可见;

1. translate

translate(位置平移)

  • 可以为负值,向右向下是正值,向上向左是负值;
  • 可以为百分比,百分比是基于元素自身宽高的(我们可以利用这一点实现 未知宽高的元素的垂直居中);
  • 2d效果可以拆开写成translateX(x)、translateY(y),也可以直接写成translate(x,y),缩写中如果只写了一个值,默认是x;
  • 3d效果还有translateZ(z),缩写translate3d(x,y,z),3d效果中缩写的话,就必须得写3个值,少一个都不行,没有的值可以设为0;

2. rotate

rotate(旋转)

  • 可以设负值;正值是顺时针旋转,负值是逆时针旋转;
  • 可以写成rotateX(deg)、rotateY(deg)、rotateZ(deg);(角度的单位,负30度就是-30deg)

3. scale

scale(缩放)

  • 可以是整数,也可以是小数,也可以设置负值;
  • 可以写成scaleX(x)、scaleY(y)、scaleZ(z),也可以缩写成scale(x,y)或者scale3d(x,y,z);
  • 当某值设为0时,就看不见元素了,但是空间还在,和visibility:hidden效果一样;
  • 当设置负值的时候,会发生翻转的效果;
  • 缩放看起来虽然大小变化了,但占据的空间不变,不会影响布局;

代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .wrapper{
                width: 300px;
                margin: 100px 0 0 100px;
                border: 10px solid red;
            }
            .test{
                width: 200px;
                height: 200px;
                display: inline-block;
                background: #0ff;
                transform: scale(.5,-1);
                border:1px solid #f60;
            }
             .test img{
                max-width: 100%;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <img src="images/1.jpg"/>
            <span>scale可以设置小数,也可以设置负值;虽然大小看起来变化了,但占据的空间不变,不会影响布局
        </div>
    </body>
</html>
View Code

4. skew

skew(倾斜)

  • 可以写成skewX(deg)、skewY(deg),也可以缩写成skew(x,y),缩写如果只写了一个值,那就默认仅仅只是x轴;
  • 目前没有Z轴的倾斜;
  • 围绕X轴倾斜,会保持高度不变,拉长元素,产生变形;围绕Y轴倾斜,会保持宽度不变;
  • 可以写负值,(下图为X轴的正值和负值);

transform做2d和3d变形(css动画一)

transform做2d和3d变形(css动画一)

代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .wrapper{
                width: 300px;
                height: 300px;
                position: relative;
                margin: 100px 0 0 100px;
                border: 1px solid red;
                background: #0ff;
            }
            .test{
                width: 150px;
                height: 60px;
                position: absolute;
                left: 30%;
                top: 30%;
                background: #f60;
                transform: skewX(-45deg);
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="test"></div>
        </div>
    </body>
</html>
View Code

 5. transform-origin

设置转换元素的基准点,然后元素的变形就围绕这个点展开;

  • 默认值是元素中心(50% 50% 0);
  • X和Y轴可以设置单位值、百分比、left | center | right | top | bottom;Z轴只能设置具体单位值;
  • 可以设置1-3个值,用空格隔开,如果只写了1个,那么仅仅只是X轴;2个的话,就是X轴和Y轴;

 6. transform-style

设定元素及其子元素怎样在三维空间中展示;

  • 默认值,flat,2d平面;设置为preserve-3d,就是3d空间;
  • 当元素设置overflow:hidden的时候,preserve-ed失效;
  • 一般我们在元素的父元素身上使用,因为此属性可以继承;

7. prespective

设置元素距离视图的距离

transform做2d和3d变形(css动画一)

  • 默认为none(0);可设置具体值,以像素为单位,不能为负值;
  • 我们看远处的物体,会发现看不清,当我们走近一点的时候,就看得清除了,此属性可以理解为我们站的位置离物体的距离;
  • 我们一般在变形元素的父元素身上使用,因为浏览器会为其子元素产生透视效果,不会为它本身产生透视效果;设置了此属性的元素我们也叫透视元素;

8. prespective-origin

设置视点;

transform做2d和3d变形(css动画一)

  • 默认值(50% 50%),可设置单位值、百分比、left | center | right | top | center | bottom ;
  • 可以设置1-2个值,设置1个值时,另一个默认为center;
  • 可以理解为我们看妹子的时候看的哪个位置,脸?腿?胸?
  • 此属性必须定义在设置了prespective属性的元素身上;

9. backface-visibility

设置当元素不面向屏幕时,是否可见;如果旋转元素不希望看见其背面时,此属性很好用;

  • 默认visible,可设置hidden;

transform做2d和3d变形(css动画一)

代码如下:

正方体后面要绕Y轴旋转180度,我一开始没想起来,调了很久;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/base.css"/>    
    </head>
    <body>
        <style type="text/css">
            *{padding: 0;margin: 0;}
            li{list-style: none;}
            /*定义舞台容器*/
            .panel{
                width: 800px;
                margin: 100px auto;
                perspective: 1300px;/*定义视距*/

            }
            .panel:hover ul{
                transform: rotateY(60deg)rotateZ(45deg);
            }
            /*立方体*/
            ul{
                width: 100px;
                height: 100px;
                margin: auto;
                position: relative;
                transform-style:preserve-3d;/*定义该立方体是个3D元素*/
                transform: rotateX(-30deg) rotateY(20deg);
                transition: all 2s;
                cursor: pointer;
            }
            /*立方体六个面*/
            li{
                width: 100px;
                height: 100px;
                position: absolute;
                top: 0;
                left: 0;

                font: 30px/100px "微软雅黑";
                text-align: center;
                color: #fff;
                backface-visibility: hidden;
            }
            .front{
                transform: translateZ(50px) ;
                background: rgba(0,255,0,.6);
            }
            .back{
                transform: translateZ(-50px) rotateY(180deg) ;
                /*后面要旋转绕Y轴180度,我一开始没想起来,调了很久*/
                background: rgba(255,0,255,.6);
            }
            .left{
                transform: translateX(-50px) rotateY(-90deg);
                background: rgba(0,0,255,.6);
            }
            .right{
                transform: translateX(50px) rotateY(90deg);
                background: rgba(255,255,0,.6);
            }
            .top{
                transform: translateY(-50px) rotateX(90deg);
                background: rgba(255,0,0,.6);
            }
            .bottom{
                transform: translateY(50px) rotateX(-90deg);
                background: rgba(0,255,255,.6);
            }
        </style>
        <div class="panel">
            <ul>
                <li class="top">上</li>
                <li class="bottom">下</li>
                <li class="left">左</li>
                <li class="right">右</li>
                <li class="front">前</li>
                <li class="back">后</li>
            </ul>
        </div>
    </body>
</html>
View Code

相关推荐