css3元素如何扭曲、移位或旋转

css3 transform

兼容性：IE10+

transform:rotate(deg)

正数为顺时针，负数为逆时针

<!DOCTYPE html>
<html lang="en"headmeta charset="UTF-8"title>Document</style>
    p{
        text-align: center;
        border1px solid
        -webkit-transformrotate(45deg)
           -moz-transform
            -ms-transform
             -o-transform
                transform;
    }
body>

    p>transform:rotate>

html>

transform:translateX(x)

transform:translateY(y)

transform:translate(x,y)

第二个值可省略，省略时默认第二个参数为0


    div
        background#abcdef
        margin-bottom50px};

    
    div:nth-child(1) ptranslateX(10px);        
    
    div:nth-child(2) ptranslateY(10px)
    div:nth-child(3) ptranslate(10px,10px)
    div:nth-child(4) ptranslate(10px)>
    div><>transform:translateX></>transform:translateY>transform:translate>

transform:scaleX(x)

transform:scaleY(y)

transform:scale(x,y)

如果只有一个参数，则默认为等比例缩放

scaleX(.5)scaleY(.5);    
    scale(.5,.3)scale(.5)>transform:scaleX>transform:scaleY>transform:scale>

transform:skewX(xdeg) 正数逆时针，负数顺时针

transform:skewY(ydeg) 正数顺时针，负数逆时针

transform:skew(xdeg,ydeg) 第二个参数可以不填写，默认为0


        width200px
    div:nth-child(1)skewX(10deg)
    div:nth-child(2)skewY(10deg)
    div:nth-child(3)skew(10deg,20deg)
    div:nth-child(4)skew(10deg)>transform:skewX>transform:skewY>transform:skew>>transform:skew>

3d 转换

tranform:rotateX(x) 沿X轴旋转

transform:rotateY(y) 沿y轴旋转

transform:rotateZ(z) 沿z轴旋转

transform:rotate3d(x,y,z,deg)

rotate3d 旋转角度根据比例计算：

x²+y²+z²=1

计算每个轴所占的比例*deg

rotateX(45deg)rotateY(45deg)rotateZ(45deg)rotate3d(1,1,45deg)>transform:rotateX>transform:rotateY>transform:rotateZ>transform:rotate3d>

计算：如rotate3d(1,2,90deg)
则 x²+(2x)²+x²=1
得 x=根号6/6
则三个轴旋转的角度分别为根号6/6*1 根号6/6*2 根号6/6*1

transform:translateX 水平，与2d一样

transform:translateY 竖直，与2d一样

transform:translateZ z轴方向，视觉上没有区别，常用于遮罩

transform:translate3d(x,z)



        text-aligntranslateX(45px)translateY(45px)translateZ(45px)translate3d(45px,45px,45px)>transform:translateZ>transform:translate3d>

transform:scaleX 与2d一样

transform:scaleY 与2d一样

transform:scaleZ 视觉上看没有区别

transform:scale3d(x,z) 参数不可省略

scaleZ(.5)scale3d(.5,.5,.5)>transform:scaleZ>transform:scale3d>

transform坐标系统

默认中心为元素的几何中心

更改原点: transform-origin


        margin50px auto{
        
    
        transform-originleft top>默认>transform-origin:left top;>

transform-style: flat | preserve-3d

嵌套元素是否显示3d效果

默认为flat，按照正常顺序排列，无3d效果


    body0 auto    
        background760px
        height
    .container        
        position relative;
        /*-webkit-transform-style:flat;
           -moz-transform-style:flat;
            -ms-transform-style:flat;
             -o-transform-style:flat;
                transform-style:flat;*/
        -webkit-transform-stylepreserve-3d
           -moz-transform-style
            -ms-transform-style
             -o-transform-style
                transform-style
    .pic,.inner,.middle,.outer
        position absolute
        top0
        left
        right
        bottomauto
    .innerurl(source/circle_inner.png) center no-repeat
        transformrotateX(108deg)
    .middleurl(source/circle_middle.png) center no-repeatrotateY(80deg)
    .outerurl(source/circle_outer.png) center no-repeatrotateZ(70deg)
    .picurl(source/pic.png) center no-repeatdiv class="container">
        ="inner"="middle"="outer"="pic">

perspective:none | 数值

perspective属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，大小程度由该属性的值决定

三维元素在观察者后面的部分不会绘制出来，即z轴坐标值大于perspective属性值的部分

属性值为0或负值或none（none是默认值）时，没有透视效果

perspective-origin 透视中心点


        -webkit-perspective500px
           -moz-perspective
            -ms-perspective
             -o-perspective
                perspective
        -webkit-perspective-originbottom
           -moz-perspective-origin
            -ms-perspective-origin
             -o-perspective-origin
                perspective-origin>

backface-visibility: visible | hidden;

背面是否可见

默认为可见

    
        width    
        position
    .box1,.box2100px200px auto
        line-height 100pxrotateX(137deg)
    .box1
        -webkit-backface-visibility visible
           -moz-backface-visibility
            -ms-backface-visibility
             -o-backface-visibility
                backface-visibility
    .box2 hidden="box1">1="box2">2>

css3元素如何扭曲、移位或旋转

相关文章