美文网首页
css3的transform

css3的transform

作者: codeSirCao | 来源:发表于2017-06-29 01:09 被阅读18次

    css3真的很强大 可以进行一个2d和3d 的效果通过tranform属性控制元素的移动,旋转,缩放,拉长或拉伸


    2d

    Paste_Image.png

    复合属性
    matrix(n,n,n,n,n,n,n) 6个值改变 所有的变相本质都是局域矩阵完成的

    改变变形的原点(集点)
    transform-origin:x y z;
    x取值 left center right length %
    y取值 left center right length %
    z轴取值 length

    简单的用法eg:

    transform:translate(x,y,z)//和transform的取值一样
    transform:translate(x,y)//但是需要注意的是兼容性
    transform:translate(x)//有时候需要加前缀
    -weblit-transform:translate(x,y,z)谷歌
    -ms-transform:translate(x,y,z)IE
    -moz-transform:translate(x,y,z)火狐
    -o-transform:translate(x,y,z)OpenGL


    3d

    其实和2d用法差不多只不过加一点属性让你看着有点3d效果

    Paste_Image.png Paste_Image.png

    解释:这个呢其实是保存3d的效果如果你做一个旋转的正方体一个元素指定完不成 所以你旋转的时候不可能全部都一个一个设置3d 的效果所个最外层加上这个可以使其下面的所有元素都有3d效果

    Paste_Image.png

    perspective景深 我一般都叫镜像映身
    举个例子 你看近处的树和远处的树 就是这个效果 就好像你看电视一样一个远处的人和近处的人 就是视觉差异


    eg一个简单的旋转正方体

    `<!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    </head>
    <style>
    {
    padding:0;
    margin:0;
    }
    ul li {
    list-style:none;
    width:300px;
    height:300px;
    position:absolute;
    text-align: center;
    font:600 36px/300px 微软雅黑;
    }
    .one{
    position:relative;
    margin: 200px auto;
    width:300px;
    height:300px;
    transform-origin:50% 50% 150px;
    /
    border:1px solid red;*/
    transform-style:preserve-3d;
    transition:all 40s;

    /*overflow: hidden;*/
    

    }
    .one:hover{
    transform:rotateX(3000deg) rotateY(3000deg) rotateZ(360deg);
    }
    ul li{
    border-radius:50%;
    }
    li:nth-child(2){
    background:red;
    right:300px;
    transform-origin:right;
    transform:rotateY(90deg)
    }
    li:nth-child(3){
    background:blue;
    right:-300px;
    transform-origin:left;
    transform:rotateY(-90deg)
    }
    li:nth-child(4){
    background:gray;
    bottom:300px;
    transform-origin:bottom;
    transform:rotateX(-90deg)
    }
    li:nth-child(5){
    background:blue;
    bottom:-300px;
    transform-origin:top;
    transform:rotateX(90deg)
    }
    li:nth-child(1){
    background:pink;

    }
    li:nth-child(6){
    background:purple;

      transform:translateZ(300px);
    

    }

    </style>

    <body>
    <div class="one">
    <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div> </body> </html>
    做法其实很简单 你拆过箱子吧 就是把拆过的箱子把它合起来
    箱子6个面 拆开: 8个div 然后定位成被拆的箱子样式
    然后呢在折成盒子:
    6个div定位成被拆过的箱子样式
    然后通过改变旋转的基点左,右,上,下在围着X或Y轴旋转
    最后再来一个平移Z轴就哦了

    相关文章

      网友评论

          本文标题:css3的transform

          本文链接:https://www.haomeiwen.com/subject/awipcxtx.html