新浦京81707con > 首页 > Transform变形理解与应用

原标题:Transform变形理解与应用

浏览次数:98 时间:2020-01-06

CSS3 Transform变形驾驭与应用,css3transform

语法 transform:none|<transform-function>

风华正茂,调换定义:

CSS3 Transform变形通晓与运用

Transform:对成分进行变形;
Transition:对成分有个别属性或两本性子的扭转,举行调节(时间等),相同flash的补间动漫。但唯有多少个关键贞。最先,甘休。
Animation:对成分有些属性或五个属性的变动,进行调整(时间等),雷同flash的补间动漫。能够安装七个重大贞。
 
Transition与Animation:
transition须求接触多少个事变 ,而animation在无需接触任何事件的情状下也能够显式的乘机岁月改造来更动成分css的属性值,进而达到意气风发种动漫的效果。

我们首先学习Transform

transform 2D/3D 转换属性向成分选择 2D 或 3D 调换。该属性允许我们对成分实行旋转、缩放、移动或偏斜。

(1卡塔尔(قطر‎rotate(卡塔尔(قطر‎旋转角度

rotate(<angle>)
eg.transform:rotate(45deg);

   1,能够转移成分的形制,尺寸,地点

一.CSS3 2D 转换

透过 CSS3 调换,大家能够对元素进行活动、缩放、转动、增长或拉伸。

(2)translate()移动

translate(<translation-value>[,<translation-value>]?)
translateX(<translation-value>)
translateY(<translation-value>)
eg.
transform:translate(50px卡塔尔;x轴方向偏移50px
transform:translate(50px,60%卡塔尔(قطر‎;x轴方向偏移50px y轴60%
transform:translateX(-50px);
transform:translateY(-50px);

   2,转变分两种:

1.2D Transform调换属性

属性 描述 CSS
transform 向元素应用 2D 或 3D 转换。 3
transform-origin 允许你改变被转换元素的位置。 3
(3)scale()缩放

scale(<number>[,number>]?)
scaleX(<number>)
scaleY(<number>)
eg.transform:scale(1.2卡塔尔国;全体放大1.2倍
transform:scale(1,1.2卡塔尔;中度进行了拉伸

    2D转移:只可以在X,Y轴发生改造:

2.2D Transform 方法

函数 描述 实例 试一试
转换      
translateX(n)
translateY(n)
沿着 X 或Y 轴移动元素。    
translate(x,y) 沿着 X 和 Y 轴移动元素。

值 translate(50px,100px) 把元素从左侧移动 50 像素,从顶端移动 100 像素。

div{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px);        /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
-o-transform: translate(50px,100px);        /* Opera */
-moz-transform: translate(50px,100px);     /* Firefox */
}

试一试
缩放      
scaleX(n)
scaleY(n)
改变元素的宽或高度。    
scale(x,y) 改变元素的宽度和高度。

值 scale(2,4) 把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍。

div{
transform: scale(2,4);
-ms-transform: scale(2,4);    /* IE 9 */
-webkit-transform: scale(2,4);    /* Safari 和 Chrome */
-o-transform: scale(2,4);    /* Opera */
-moz-transform: scale(2,4);    /* Firefox */
}

试一试
定义 2D 旋转      
rotate(angle) 在参数中规定角度。turn是圈,1turn = 360deg;另外还有弧度rad,2πrad = 1turn = 360deg。如,transform:rotate(2turn); //旋转两圈

值 rotate(30deg) 把元素顺时针旋转 30 度。

div{
transform: rotate(30deg);
-ms-transform: rotate(30deg);        /* IE 9 */
-webkit-transform: rotate(30deg);    /* Safari and Chrome */
-o-transform: rotate(30deg);        /* Opera */
-moz-transform: rotate(30deg);        /* Firefox */
}

试一试
倾斜      
skewX(angle)
skewY(angle)
沿着 X 、或Y轴。    
skew(x-angle,y-angle) 沿着 X 和 Y 轴。

值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度,围绕 Y 轴翻转 20 度。

div{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg);    /* IE 9 */
-webkit-transform: skew(30deg,20deg);    /* Safari and Chrome */
-o-transform: skew(30deg,20deg);    /* Opera */
-moz-transform: skew(30deg,20deg);    /* Firefox */
}

试一试
使用六个值的矩阵。      
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。

matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。

使用 matrix 方法将 div 元素旋转 30 度

div{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);        /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);    /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);    /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);        /* Opera */
}

试一试
(4)skew()倾斜

skew(<angle>[,<angle>]?)
skewX(<angle>)
skewY(<angle>)
transform:skew(30degState of Qatar;Y轴向X周正方向偏斜30度
transform:skew(30deg,30deg卡塔尔(قطر‎;Y轴向X轴正方向倾斜30度,X轴向Y轴正方向偏斜30度
transform:translate(百分之五十卡塔尔(قطر‎ rotate(45degState of Qatar;顺序差别 结果分裂

    例子:旋转(rotate)、拉伸(scale)、平移(move)、倾斜(skew)

二.CSS3 3D 转换

三维转变使用基于二维变换的均等属性,假令你熟识二维调换,你们发掘3D变形的功能和2D转变的效用优异相近。CSS3中的3D调换主要不外乎以下两种意义函数:

3D位移:CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数;
3D旋转:CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数;
3D缩放:CSS3中的3D缩放主要包括scaleZ()和scale3d()两个功能函数;
3D矩阵:CSS3中3D变形中和2D变形一样也有一个3D矩阵功能函数matrix3d()。
(5卡塔尔(قطر‎ transform-origin 重新定位原点

transform-origin:[left|center|right|top|bottom|<percentage>|<length>]
|
[left|center|right|<percentage>|<length>]
[top|center|bottom|<percentage>|<length>]<length>?
|
[center|[left|right]]&&[center|[top|bottom]]<length>?
X Y Z
eg.transform-origin:50% 50% 默认值 中心点
transform-origin:0 0;最左上角
transform-origin:20%;默认Y轴 50%
transform-origin:right 50px 20px;right最右 上50px Z轴正方向20px
transform-origin:top right 20px;top容器顶上部分 顶端最右 Z正方向20px

    3D转变:除了X,Y轴以外还是能Z轴变化。

1.3D位移

在CSS3中3D位移首要包蕴二种函数translateZ(State of Qatar和translate3d(State of Qatar。translate3d(State of Qatar函数使四个要素在三个维度空间移动。这种变形的特征是,使用三个维度向量的坐标定义成分在各类方向移动多少。

乘胜px的充实,直观效果上:

X:从左向右移动
Y:从上向下移动
Z:以方框中心为原点,变大

.stage { width: 300px; height: 300px; float: left; margin: 15px; position: relative; background: url() repeat center center; -webkit-perspective: 1200px; -moz-perspective: 1200px; -ms-perspective: 1200px; -o-perspective: 1200px; perspective: 1200px; } .container { position: absolute; top: 50%; left: 50%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .container img { position: absolute; margin-left: -35px; margin-top: -50px; } .container img:nth-child(1){ z-index: 1; opacity: .6; } .s1 img:nth-child(2){ z-index: 2; -webkit-transform: translate3d(30px,30px,200px); -moz-transform: translate3d(30px,30px,200px); -ms-transform: translate3d(30px,30px,200px); -o-transform: translate3d(30px,30px,200px); transform: translate3d(30px,30px,200px); }

效果:

.stage { width: 300px; height: 300px; float: left; margin: 15px; position: relative; background: url() repeat center center; -webkit-perspective: 1200px; -moz-perspective: 1200px; -ms-perspective: 1200px; -o-perspective: 1200px; perspective: 1200px; } .container { position: absolute; top: 50%; left: 50%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .container img { position: absolute; margin-left: -70px; margin-top: -100px; } .container img:nth-child(1){ z-index: 1; opacity: .6; } .s4 img{ z-index: 2; -webkit-transform:rotate3d(.6,1,.6,45deg); -moz-transform:rotate3d(.6,1,.6,45deg); -ms-transform:rotate3d(.6,1,.6,45deg); -o-transform:rotate3d(.6,1,.6,45deg); transform:rotate3d(.6,1,.6,45deg); }

效果:

.s1 img:nth-child(2){ z-index: 2; -webkit-transform: scaleZ(5) rotateX(45deg); -moz-transform: scaleZ(5) rotateX(45deg); -ms-transform: scaleZ(5) rotateX(45deg); -o-transform: scaleZ(5) rotateX(45deg); transform: scaleZ(5) rotateX(45deg); } .s2 img:nth-child(2){ z-index: 2; -webkit-transform: scaleZ(.25) rotateX(45deg); -moz-transform: scaleZ(.25) rotateX(45deg); -ms-transform: scaleZ(.25) rotateX(45deg); -o-transform: scaleZ(.25) rotateX(45deg); transform: scaleZ(.25) rotateX(45deg); }

效果:

matrix3d(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1)

(6State of Qatarperspective透视效果

perspective:none|<length>
perspective:none;
perspective:2000px;
perspective:500px;距离近 更明显

    如:空间旋转。。。

5.3D倾斜

偏斜是二维变形,不可能在三维空间变形。成分只怕会在X轴和Y轴偏斜,然后转向为三个维度,但它们无法在Z轴偏斜。

(6卡塔尔-1 perspective-origin透视角度

perspective-origin:[left|center|right|top|bottom|<percentage>|<length>]
|
[left|center|right|<percentage>|<length>]
[top|center|bottom|<percentage>|<length>]
|
[center|[left|right]]&&[center|[top|bottom]]
eg.perspective-origin:50% 50%;默认
perspective-origin:left bottom;从左下角看
perspective-origin:八分之四 -800px;中间下边包车型的士岗位看
perspective-origin:right;左侧中间的地点

二,调换属性(transform:使用2D,3D):

三.多重变形

在CSS3中,不管是2D变形依旧3D变形,大家都足以动用多种变形,他们之间选拔空格分隔,具体的语法如下:

transform: <transform-function>  <transform-function> *

在那之中transfrom-function是指CSS3中的任何变形函数。大家来看多个接纳多种变形制作的立方体。先来看多个施用2D变形制作的立方体:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        @-webkit-keyframes spin{
            0%{-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}
            100%{-webkit-transform:rotateY(360deg);transform:rotateY(360deg)}
        }
        @-moz-keyframes spin{
            0%{-moz-transform:rotateY(0deg);transform:rotateY(0deg)}
            100%{-moz-transform:rotateY(360deg);transform:rotateY(360deg)}
        }
        @-ms-keyframes spin{        
            0%{-ms-transform:rotateY(0deg);transform:rotateY(0deg)}     100%{-ms-transform:rotateY(360deg);transform:rotateY(360deg)}
        }
        @-o-keyframes spin{     
            0%{-o-transform:rotateY(0deg);transform:rotateY(0deg)}
            100%{-o-transform:rotateY(360deg);transform:rotateY(360deg)}
        }
        @keyframes spin{
            0%{transform:rotateY(0deg)}
            100%{transform:rotateY(360deg)}
        }
        .stage {
            width: 300px;
            height: 300px;
            float: left;
            margin: 15px;
            position: relative;
            background: url(http://www.w3cplus.com/sites/default/files/blogs/2013/1311/bg.jpg) repeat center center;

            -webkit-perspective: 1200px;
            -moz-perspective: 1200px;
            -ms-perspective: 1200px;
            -o-perspective: 1200px;
            perspective: 1200px;
        }
        .container {
            position: relative;
            height: 230px;
            width: 100px;
            top: 50%;
            left: 50%;
            margin: -100px 0 0 -50px;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }
        .container:hover{
            -moz-animation:spin 5s linear infinite;
            -o-animation:spin 5s linear infinite;
            -webkit-animation:spin 5s linear infinite;
            animation:spin 5s linear infinite;
        }
        .side {
            font-size: 20px;
            font-weight: bold;
            height: 100px;
            line-height: 100px;
            color: #fff;
            position: absolute;
            text-align: center;
            text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
            text-transform: uppercase;
            width: 100px;
        }
        .top {
            background: #9acc53;
            -webkit-transform: rotate(-45deg) skew(15deg, 15deg);
            -moz-transform: rotate(-45deg) skew(15deg, 15deg);
            -ms-transform: rotate(-45deg) skew(15deg, 15deg);
            -o-transform: rotate(-45deg) skew(15deg, 15deg);
            transform: rotate(-45deg) skew(15deg, 15deg);
        }
        .left {
            background: #8ec63f;
            -webkit-transform: rotate(15deg) skew(15deg, 15deg) translate(-50%, 100%);
            -moz-transform: rotate(15deg) skew(15deg, 15deg) translate(-50%, 100%);
            -ms-transform: rotate(15deg) skew(15deg, 15deg) translate(-50%, 100%);
            -o-transform: rotate(15deg) skew(15deg, 15deg) translate(-50%, 100%);
            transform: rotate(15deg) skew(15deg, 15deg) translate(-50%, 100%);
        }
        .right {
            background: #80b239;
            -webkit-transform: rotate(-15deg) skew(-15deg, -15deg) translate(50%, 100%);
            -moz-transform: rotate(-15deg) skew(-15deg, -15deg) translate(50%, 100%);
            -ms-transform: rotate(-15deg) skew(-15deg, -15deg) translate(50%, 100%);
            -o-transform: rotate(-15deg) skew(-15deg, -15deg) translate(50%, 100%);
            transform: rotate(-15deg) skew(-15deg, -15deg) translate(50%, 100%);
        }
    </style>
</head>
<body>
    <div class="stage s1">
        <div class="container">
            <div class="side top">1</div>
            <div class="side left">2</div>
            <div class="side right">3</div>
        </div>
    </div>
</body>
</html>
(7)translate3d() 3D效果

translate3d(<translation-value>,<translation-value>,<length>)
translateX(<translation-value>)
translateY(<translation-value>)
translateZ(<length>)
eg.transform:translate3d(10px,20%,50px);

    1,提示:

上例通过两个面,使用五个2D变形,制作的一个3D立方,接着大家在来使用3D多种变形制作八个3D立方。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        @-webkit-keyframes spin{
     0%{
         -webkit-transform:rotateY(0deg);
         transform:rotateY(0deg)
       }
      100%{
        -webkit-transform:rotateY(360deg);
        transform:rotateY(360deg)
      }
    }
    @-moz-keyframes spin{
        0%{
            -moz-transform:rotateY(0deg);
            transform:rotateY(0deg)
        }
        100%{
            -moz-transform:rotateY(360deg);
            transform:rotateY(360deg)
        }
    }
    @-ms-keyframes spin{
        0%{
            -ms-transform:rotateY(0deg);
            transform:rotateY(0deg)
        }
        100%{
            -ms-transform:rotateY(360deg);
            transform:rotateY(360deg)
        }
    }
    @-o-keyframes spin{
        0%{
            -o-transform:rotateY(0deg);
            transform:rotateY(0deg)
        }
        100%{
            -o-transform:rotateY(360deg);
            transform:rotateY(360deg)
        }
    }
    @keyframes spin{
        0%{transform:rotateY(0deg)}
        100%{transform:rotateY(360deg)}
    }
    .stage {
        width: 300px;
        height: 300px;
        margin: 15px auto;
        position: relative;
        background: url(http://www.w3cplus.com/sites/default/files/blogs/2013/1311/bg.jpg) repeat center center;

        -webkit-perspective: 300px;
        -moz-perspective: 300px;
        -ms-perspective: 300px;
        -o-perspective: 300px;
        perspective: 300px;
    }
    .container {
        top: 50%;
        left: 50%;
        margin: -100px 0 0 -100px;
        position: absolute;
        -webkit-transform: translateZ(-100px);
        -moz-transform: translateZ(-100px);
        -ms-transform: translateZ(-100px);
        -o-transform: translateZ(-100px);
        transform: translateZ(-100px);
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    .container:hover{
        -moz-animation:spin 5s linear infinite;
        -o-animation:spin 5s linear infinite;
        -webkit-animation:spin 5s linear infinite;
        animation:spin 5s linear infinite;
    }
    .side {
        background: rgba(142,198,63,0.3);
        border: 2px solid #8ec63f;
        font-size: 60px;
        font-weight: bold;
        color: #fff;
        height: 196px;
        line-height: 196px;
        position: absolute;
        text-align: center;
        text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
        text-transform: uppercase;
        width: 196px;
    }

    .front {
        -webkit-transform: translateZ(100px);
        -moz-transform: translateZ(100px);
        -ms-transform: translateZ(100px);
        -o-transform: translateZ(100px);
        transform: translateZ(100px);
    }
    .back {
        -webkit-transform: rotateX(180deg) translateZ(100px);
        -moz-transform: rotateX(180deg) translateZ(100px);
        -ms-transform: rotateX(180deg) translateZ(100px);
        -o-transform: rotateX(180deg) translateZ(100px);
        transform: rotateX(180deg) translateZ(100px);
    }
    .left {
        -webkit-transform: rotateY(-90deg) translateZ(100px);
        -moz-transform: rotateY(-90deg) translateZ(100px);
        -ms-transform: rotateY(-90deg) translateZ(100px);
        -o-transform: rotateY(-90deg) translateZ(100px);
        transform: rotateY(-90deg) translateZ(100px);
    }
    .right {
        -webkit-transform: rotateY(90deg) translateZ(100px);
        -moz-transform: rotateY(90deg) translateZ(100px);
        -ms-transform: rotateY(90deg) translateZ(100px);
        -o-transform: rotateY(90deg) translateZ(100px);
        transform: rotateY(90deg) translateZ(100px);
    }
    .top {
        -webkit-transform: rotateX(90deg) translateZ(100px);
        -moz-transform: rotateX(90deg) translateZ(100px);
        -ms-transform: rotateX(90deg) translateZ(100px);
        -o-transform: rotateX(90deg) translateZ(100px);
        transform: rotateX(90deg) translateZ(100px);
    }
    .bottom {
        -webkit-transform: rotateX(-90deg) translateZ(100px);
        -moz-transform: rotateX(-90deg) translateZ(100px);
        -ms-transform: rotateX(-90deg) translateZ(100px);
        -o-transform: rotateX(-90deg) translateZ(100px);
        transform: rotateX(-90deg) translateZ(100px);
    }
    </style>
</head>
<body>
    <div class="stage">
        <div class="container">
            <div class="side front">1</div>
            <div class="side back">2</div>
            <div class="side left">3</div>
            <div class="side right">4</div>
            <div class="side top">5</div>
            <div class="side bottom">6</div>
        </div>
    </div>
</body>
</html>

属性

描述

CSS

transform

向成分采纳 2D 或 3D 转变。

3

transform-origin

同意你转移被转移成分的义务。

3

transform-style

规定被嵌套成分怎么样在 3D 空间中彰显。

3

perspective

鲜明 3D 成分的透视效果。

3

perspective-origin

明确 3D 元素的底部地方。

3

backface-visibility

概念成分在不直面显示器时是不是可知。

3

(8)scale3d()

scale3d(<number>,<number>,<number>)
scaleX(<number>)
scaleY(<number>)
scaleZ(<number>)
eg.transform:scale3d(1.2,1.2,1);

    近日浏览器并非完全协助具备的Transform ,IE9、Firefox 和Opera 仅协助2D transforms ,相应的CSS定义为:-ms-transform 、-moz-transform 和-o-transform ,而Safari 和Chrome 都帮助2D和3D transforms ,相应的CSS定义为:-webkit-transform 。

1.transform-origin

transform-origin,变形的原点。暗许情形,变形的原点在要素的基本点,可能是因素X轴和Y轴的二分一处,如下图:

transform-origin:[<percentage> | <length> | left | center | right | top | bottom] | [<percentage> | <length> | left | center | right] | [[<percentage> | <length> | left | center | right] && [<percentage> | <length> | top | center | bottom]] <length> ?

下边包车型的士语法令人看得发晕,其实能够将语法拆分成:

/*只设置一个值的语法*/
transform-origin: x-offset
transform-origin:offset-keyword
/*设置两个值的语法*/
transform-origin:x-offset  y-offset
transform-origin:y-offset  x-offset-keyword
transform-origin:x-offset-keyword  y-offset
transform-origin:x-offset-keyword  y-offset-keyword
transform-origin:y-offset-keyword  x-offset-keyword
/*设置三个值的语法*/
transform-origin:x-offset  y-offset  z-offset
transform-origin:y-offset  x-offset-keyword  z-offset
transform-origin:x-offset-keyword  y-offset  z-offset
transform-origin:x-offset-keyword  y-offset-keyword  z-offset
transform-origin:y-offset-keyword  x-offset-keyword  z-offset

2D的变形中的transform-origin属性能够是贰个参数值,也足以是七个参数值。若是是多少个参数值时,第生龙活虎值设置水平方向X轴的职位,第4个值是用来设置垂直方向Y轴的岗位。

3D的变形中的transform-origin属性还富含了Z轴的第七个值。其种种值的取值轻松表明如下:

-x-offset:用来设置transform-origin水平方向X轴的偏移量,可以使用<length>和<percentage>值,同时也可以是正值(从中心点沿水平方向X轴向右偏移量),也可以是负值(从中心点沿水平方向X轴向左偏移量)。
-offset-keyword:是top、right、bottom、left或center中的一个关键词,可以用来设置transform-origin的偏移量。
-y-offset:用来设置transform-origin属性在垂直方向Y轴的偏移量,可以使用<length>和<percentage>值,同时可以是正值(从中心点沿垂直方向Y轴向下的偏移量),也可以是负值(从中心点沿垂直方向Y轴向上的偏移量)。
 -x-offset-keyword:是left、right或center中的一个关键词,可以用来设置transform-origin属性值在水平X轴的偏移量。
-y-offset-keyword:是top、bottom或center中的一个关键词,可以用来设置transform-origin属性值在垂直方向Y轴的偏移量。
 -z-offset:用来设置3D变形中transform-origin远离用户眼睛视点的距离,默认值z=0,其取值可以<length>,不过<percentage>在这里将无效。

看起来transform-origin取值与background-position取值相通。为了有助于纪念,能够把首要词和百分比率比较起来记:

 top = top center = center top = 50% 0
 right = right center = center right = 100%或(100% 50%)
 bottom = bottom center = center bottom = 50% 100%
 left = left center = center left = 0或(0 50%)
 center = center center = 50%或(50% 50%)
 top left = left top = 0 0
 right top = top right = 100% 0
 bottom right = right bottom = 100% 100%
 bottom left = left bottom = 0 100%
(9)rotate3d()

rotate3d(<number>,<number>,<number>,<angle>)
rotateX(<angle>)
rotateY(<angle>)
rotateZ(<angle>)
transform:rotate3d(1,0,0,45deg卡塔尔国;取X轴上的1,与原点连线,以连线为轴转动45度

    2,取值:

2.transform-style

transform-style属性是3D空间三个第后生可畏性质,钦命嵌套成分如何在3D空间中表现。他珍视有七个属性值:flat和preserve-3d。

transform-style属性的利用语法特简单:

transform-style: flat | preserve-3d

里面flat值为默许值,表示具备子成分在2D平面呈现。preserve-3d表示具有子成分在3D空间中展现。

也等于说,倘若对叁个成分设置了transform-style的值为flat,则该因素的具备子成分都将被平整到该因素的2D平面中开展展现。沿着X轴或Y轴方向旋转该因素将引致位周振天或负Z轴地点的子成分展现在该因素的平面上,实际不是它的前边或然前面。假如对八个要素设置了transform-style的值为preserve-3d,它表示不实行平展操作,他的有着子成分坐落于3D空间中。

transform-style属性必要设置在父成分中,并且当先其余嵌套的变变成分。

例如:

transform-style: preserve-3d;

(10)transform-style

transform-style:flat|preserve-3d

    transform: none(暗许值,表示成分不开展调换)

3.perspective

perspective属性对于3D变形来讲根本。该属性会设置查看者之处,并将可视内容映射到一个视锥上,进而投到一个2D视平面上。纵然不钦点透视,则Z轴空间中的全部一点将平铺到同二个2D视平面中,况且转换结果元帅不设有景深概念。

地点的叙说大概令人难以精晓一些,其实对于perspective属性,大家可以省略的知道为视距,用来设置客户和因素3D空间Z平面之间的相距。而其效应由他的值来调节,值越小,客户与3D空间Z平面间隔越近,视觉效果更令人回想浓烈;反之,值越大,客商与3D空间Z平面间距越远,视觉效果就非常的小。

在3D变形中,对于一些变形,比方下边包车型地铁演示演示的沿Z轴的变形,perspective属性对于查看变形的功效来讲必不可缺。

我们先来看一个简单易行的实例,制作一个扑克牌3D旋转效果,而且一个在扑克牌的父成分增加了视距perspective,而另一个却未曾设置:

div {
    width: 500px;
    height: 300px;
    margin: 30px auto;
    position: relative;
    background: url(images/bg-grid.jpg) no-repeat center center;
    background-size: 100% 100%;
}
div img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -71px;
    margin-top: -100px; 
    transform-origin: bottom;
}
div img:nth-child(1){
    opacity: .5;
    z-index: 1;
}
div img:nth-child(2){
    z-index: 2;
    transform: rotateX(45deg);
}
div:nth-of-type(2){
    perspective: 500px;
}

功效如下:

perspective:none | <length>

perspective属性包蕴八个属性:none和兼具单位的尺寸值。个中perspective属性的默许值为none,表示最棒的角度来看3D实体,但看起来是平的。另二个值<length>接纳二个尺寸单位大于0的值。何况其单位不可能为百分比率。<length>值越大,角度现身的越远,从而创制叁个一定低的强度和丰硕小的3D空间变化。反之,此值越小,角度现身的越近,进而成立三个高强度的角度和八个重型3D变化。

诸如您站在10英尺和1000英尺的地点看三个10英尺的立方体。在10英尺之处,你相差立方体是蓬蓬勃勃致的尺寸。因而意见转换远远大于站在1000英尺处的,立体尺寸是您离开立方体间隔的百分之后生可畏。相像的思维适用于perspective的<length>值。我们一起来看两个实例,来抓好那上头的精通:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrapper {
        width: 50%;
        float: left;
        }
        .cube {
            font-size: 4em;
            width: 2em;
            margin: 1.5em auto;
            transform-style: preserve-3d;
            transform: rotateX(-40deg) rotateY(32deg);
        }
        .side {
            position: absolute;
            width: 2em;
            height: 2em;
            background: rgba(255, 99, 71, 0.6);
            border: 1px solid rgba(0, 0, 0, 0.5);
            color: white;
            text-align: center;
            line-height: 2em;
        }
        .front {
            transform: translateZ(1em);
        }
        .top {
            transform: rotateX(90deg) translateZ(1em);
        }
        .right {
            transform: rotateY(90deg) translateZ(1em);
        }
        .left {
            transform: rotateY(-90deg) translateZ(1em);
        }
        .bottom {
            transform: rotateX(-90deg) translateZ(1em);
        }

        .back {
            transform: rotateY(-180deg) translateZ(1em);
        }
        .w1 {
            perspective: 100px;
        }
        .w2{
            perspective: 1000px;
        }
    </style>
</head>
<body>
    <div class="wrapper w2">
        <div class="cube">
            <div class="side  front">1</div>
            <div class="side   back">6</div>
            <div class="side  right">4</div>
            <div class="side   left">3</div>
            <div class="side    top">5</div>
            <div class="side bottom">2</div>
        </div>
    </div>
    <div class="wrapper w1">
        <div class="cube">
            <div class="side  front">1</div>
            <div class="side   back">6</div>
            <div class="side  right">4</div>
            <div class="side   left">3</div>
            <div class="side    top">5</div>
            <div class="side bottom">2</div>
        </div>
    </div>
</body>
</html>

perspective-origin:[<percentage> | <length> | left | center | right | top | bottom] | [[<percentage> | <length> | left | center | right] && [<percentage> | <length> | top | center | bottom]]

该属性的暗中认可值为“百分之陆十分之三”(也正是center卡塔尔,其也足以设置为二个值,也能够安装为多个长度值:

首先个长度值钦点绝对于成分的带有框的X轴上之处。它能够是长度值(以受支持的长度单位代表)、百分比或以下四个入眼词之生龙活虎:left(表示在富含框的X轴方向长度的0%),center(表示中间点),或right(表示长度的百分百)。
第三个长度值钦赐绝对于成分的满含框的Y轴上的位置。它可以是长度值、百分比或以下多少个根本词之黄金时代:top(表示在包罗框的Y轴方向长度的0%),center(表示中间点),或bottom(表示长度的100%)。
只顾,为了指转变子成分变形的深度,perspective-origin属性必得定义父成分上。经常perspective-origin属性自己不做其它业务,它必需被定义在设置了perspective属性的成分上。换句话说,perspective-origin属性需求与perspective属性结合起来使用,以便将视点移至成分的主导以外地方

backface-visibility: visible | hidden

该属性被安装为以下多少个重大词之大器晚成:

 visible:为backface-visibility的默认值,表示反面可见
hidden:表示反面不可见
一个元素的可见性与“backface-visibility:hidden”决定如下:

要素在3D情形下渲染上下文,将基于3D变形矩阵来测算,反之成分不在3D境况下渲染上下文,将依据2D变形矩阵来计量。
假定组件的矩阵在第3行、3列是负值,那么元素反面是藏身,反之是可以见到的。
简短点以来,backface-visibility属性可用来隐蔽内容的西部。暗许意况下,背面可以预知,那代表正是在回转后,旋转的内容还是可以预知。但当backface-visibility设置为hidden时,旋转后内容将隐形,因为旋转后体面将不再可以知道。该成效可补助您模拟多面包车型地铁对象,比如下例中利用的卡片。通过将backface-visibility设置为hidden,您能够轻便确认保障独有正面可以预知。

大家通过3D立方体来做贰个实例,令你能从视觉上更能直能的分别backface-visibility取值为hidden和visible的分别:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container {
          width: 500px;
          height: 300px;
          float: left;
          position: relative;
          margin: 30px;
          border: 1px solid #CCC;
          perspective: 1200px;
        }
        .cube {
          width: 100%;
          height: 100%;
          position: absolute;
          animation: spinCube 8s infinite ease-in-out;
          transform-style: preserve-3d;
          transform: translateZ( -100px );
        }
        @keyframes spinCube {
          0% { 
            transform: translateZ( -100px ) rotateX(   0deg ) rotateY(   0deg ); 
            }
          100% {
            transform: translateZ( -100px ) rotateX( 360deg ) rotateY( 360deg ); 
          }
        }

        .side {
         display: block;
         position: absolute;
         width: 196px;
         height: 196px;
         border: 2px solid black;
         line-height: 196px;
         font-size: 120px;
         font-weight: bold;
         color: white;
         text-align: center;
        }

        .cube.backface-visibility-visible .side {
          backface-visibility: visible;
        }
        .cube.backface-visibility-hidden .side {
          backface-visibility: hidden;
        }

        .cube .front  { background: hsla(   0, 100%, 50%, 0.7 ); }
        .cube .back   { background: hsla(  60, 100%, 50%, 0.7 ); }
        .cube .right  { background: hsla( 120, 100%, 50%, 0.7 ); }
        .cube .left   { background: hsla( 180, 100%, 50%, 0.7 ); }
        .cube .top    { background: hsla( 240, 100%, 50%, 0.7 ); }
        .cube .bottom { background: hsla( 300, 100%, 50%, 0.7 ); }

        .cube .front  {
          transform: translateZ( 100px );
        }
        .cube .back {
          transform: rotateX( -180deg ) translateZ( 100px );
        }
        .cube .right {
          transform: rotateY(   90deg ) translateZ( 100px );
        }
        .cube .left {
          transform: rotateY(  -90deg ) translateZ( 100px );
        }
        .cube .top {
          transform: rotateX(   90deg ) translateZ( 100px );
        }
        .cube .bottom {
          transform: rotateX(  -90deg ) translateZ( 100px );
        }   
    </style>
</head>
<body>
    <div class="container">
        <h1>backface-visibility:visible</h1>
        <div class="cube backface-visibility-visible">
            <div class="side front">1</div>
            <div class="side back">2</div>
            <div class="side right">3</div>
            <div class="side left">4</div>
            <div class="side top">5</div>
            <div class="side bottom">6</div>
        </div>
    </div>  

    <div class="container">
        <h1>backface-visibility:hidden</h1>
        <div class="cube backface-visibility-hidden">
            <div class="side front">1</div>
            <div class="side back">2</div>
            <div class="side right">3</div>
            <div class="side left">4</div>
            <div class="side top">5</div>
            <div class="side bottom">6</div>
        </div>
    </div>
</body>
</html>

CSS3动漫精晓与行使

转发需注解转发字样,标明原文者和原博文地址。

Transform变形理解与应用,css3transform CSS3 Transform变形精通与利用 Transform:对成分实行变形; Transition:对成分有些属性或多个特性的变化...

(11卡塔尔国backface-visibility 背面是不是可知

backface-visibility:visible|hidden

    transform-functions(表示四个只怕多少个转移函数,中间以空格分开):

       解释:CSS3变形是一些功力的集中,比如移动、旋转、缩放和偏斜效果,各个效果都被称作为变形函数(Transform Function)

    写法:

    transform:: rotate(angle) scale(x,y)/(0~1的值)skewX(angle) translate(x,y);

    3,transform-origin()属性:

      1State of Qatar,暗中同意情状,变形的原点在要素的大旨点;

       写法:transform-origin : 数值/百分比/关键字(left,right,top,bottom);

       多个值:表示全部轴的岗位

       两个值:表示 X 轴和 Y 轴

       三个值:表示 X 轴、Y 轴和 Z 轴;

    4,2D位移:

      1)translate(平移卡塔尔国 可取值:数值、百分比,也能够是负值

      2)scale(缩放State of Qatar可取值:暗中同意值为1,减弱:0 到 1 之间的数值,放大:大于 1 的数值;

      3)rotate(旋转卡塔尔(قطر‎可取值:依照原点,将成分依照顺时针旋转给定的角度

      允许负值,成分将逆时针旋转 

      4)skew(偏斜State of Qatar  可取值;以原点位置,围绕 X 轴和 Y 轴,也能够依照一定的角度偏斜,只怕会变动成分的形态

    5,transform-style属性也是3D效果中日常应用的,

      1)flat值为默许值,表示全部子成分在2D平面显示。preserve-3d表示具备子元素在3D空间中表现。

 

      2)假诺对四个成分设置了transform-style的值为flat,则该因素的具有子成分都将被平整到该因素的2D平面中开展彰显。沿着X轴或Y轴方向旋转该因素将引致位苏降雨或负Z轴地方的子成分展现在该因素的平面上,并不是它的日前可能后边。倘若对三个成分设置了transform-style的值为preserve-3d,它表示不进行平展操作,他的保有子成分坐落于3D空间中。

      transform-style属性需求安装在父成分中,并且超过其余嵌套的变产生分。

       Demo:

       HTML:

       <div class="wrap">

       <div class="spin">

        <div class="rotate">

            <img src="3d-distance.jpg" alt="" width="142" height="200" />

        </div>

        </div>

        </div>

        <div class="wrap">

        <div class="spin">

        <div class="rotate three-d">

本文由新浦京81707con发布于首页,转载请注明出处:Transform变形理解与应用

关键词: 新浦京81707con 笔记

上一篇:readonly和disabled的区别(转),readonlydisabled

下一篇:没有了