隨手記錄---transform 屬性

時間 2019-11-10

標籤隨手記錄 transform 屬性简体版

原文原文鏈接

　　其實平時不多用到transform屬性，一些放大縮小用width、height能夠改變，一些位置變換，更是有margin，而一些旋轉、2D、3D變換也不怎麼能用獲得。不過最近接觸了一些圖片的縮放，以爲不錯，我就進行了一下學習。transform的元素會根據方法進行位置大小等的變換，可是還佔據着本來在文檔流中的位置。css

　　呃……比想象的麻煩，主要是作了個界面。transform是前端作3D的基礎，想要作得好，仍是得費點心思的，這裏只記錄一下基本的用法吧。使用transform的時候兼容的寫法以下所示，下文就直接使用transform。html

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

一、matrix前端

　　matrix(n1,n2,n3,n4,n5,n6)和4*4矩陣matrix3d是變換圖形的基本矩陣，學過圖像處理的應該比較清楚，我懶得再仔細看了，畢竟這兩個方法也不怎麼經常使用到，使用後面的方法大概均可以解決大部分需求了，簡單講講。vue

　　matrix(n1,n2,n3,n4,n5,n6)對應的是3*3矩陣（以下所示），只是其中的六個值，matrix的初始狀態是matrix(1,0,0,1,0,0);jquery

　　matrix3d()對應的4*4矩陣以下，它的初始狀態是matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)web

二、noneide

　　初始狀態，不作任何變換，對應着矩陣的單位矩陣學習

三、translate方法動畫

　　進行位置的偏移，包括translate(x,y),translate3d(x,y),translateX(x),translateY(y),translateZ(z)。初始狀態三個參數x，y，z都爲0px，其正數分別爲向右，下，靠近人的方向移動，由於我用的圖片是在2D平面上的，其中z的偏移我看不出明顯的區別，配合其餘方法（如rotate應該能夠看出來）。ui

.mydiv{
    transform:translate(10px,-18px);
}

.mydiv{
    transform:translate3d(10px,-18px,28px);    
}

.mydiv{
    transform:translateX(10px);    
}

.mydiv{
    transform:translateY(-18px);    
}

.mydiv{
    transform:translateZ(28px);    
}

四、scale

　　scale進行元素的縮放，包括scale(sx,sy), scale3d(sx,sy,sz), scaleX(sx), scaleY(sy), scaleZ(sz), 其中參數是本來長度的倍數，爲1表明元素本來的大小。

.mydiv{
    transform:scale(0.5,1.5);    
}

.mydiv{
    transform:scale3d(0.5,1.5,1.2);    
}

.mydiv{
    transform:scaleX(0.5);    
}

.mydiv{
    transform:scaleY(1.5);    
}

.mydiv{
    transform:scaleZ(1.2);    
}

五、rotate

　　圍繞某個軸進行旋轉，rotateX(x-angle)、rotateY(y-angle),rotateZ(z-angle)，分別是圍繞x軸，y軸，z軸進行指定度數（deg）的旋轉，正數是順時針方向旋轉負數是逆時針，rotate是圍繞z軸的旋轉，rotate3d(x,y,z,angle)提供自定義旋轉軸的方法，（x,y,z）就是表示在x、y、z座標軸中的某一條軸，我看到的說法是0~1內的矢量值，可是經實驗，其餘數值也能夠。

.mydiv{
    transform:rotate(30deg);    
}

.mydiv{
    transform:rotate3d(0.5,0.5,0.5,30deg);    
}

.mydiv{
    transform:rotateX(30deg);
}

.mydiv{
    transform:rotateY(30deg);
}

.mydiv{
    transform:rotateZ(30deg);
}

六、skew

　　skew進行傾斜，包括skew(x,y),skew(x),skew(y)，有沿x軸，y軸方向傾斜兩種方式，單位是deg。

.mydiv{
    transform:skew(13deg,-12deg);    
}

.mydiv{
    transform:skewX(13deg);    
}

.mydiv{
    transform:skewY(-12deg);    
}

七、perspective　　

　　perspective(30px)，這個說不太清楚，以前看到的解釋也找不到網址了，大概它讓元素在視覺上離你更近，配合其餘變換纔有效果。

　　補充：給父元素添加css--perspective:1000px;後，有關z的某些操做纔會看得出來

總結：matrix和matrix3d包含了全部方法，可是不必去作那麼複雜的變換，須要瞭解具體變換的，文章matrix - matrix3d介紹中有介紹。須要實現3d效果，仍是須要配合多種方法進行更加細緻的調整，暫時不深刻，還有就是能夠配合動畫和transition進行變換。

另附一個使用了vue.min.js,jquery和layui結合和全部變換方法的頁面吧，全部時間都在弄這個上面了，比想象的複雜，相關的js、css用的是本地的，使用的是谷歌沒怎麼考慮兼容性的問題了

代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css"><!--引入layui的css-->
<style>
/*圖片容器樣式*/
.image-container .imgs-container{
    background:#E9E9E9;
    height:600px;
    text-align:center;
    position:relative;
}
.image-container .imgs{
    margin:100px auto;
    margin-bottom:0;
    width:300px;
    background:white;
    padding:10px;
    display:inline-block;
}
.image-container .imgs img{
    width:100%;
}
/*單選部分*/
.image-container .radiogroup{
    height:200px;
    overflow:auto;
    border:1px solid #77858f;
    padding:10px;
    margin-top:10px;
}
/*下文滑塊部分*/
.image-container .inputgroup{
    height:300px;
    overflow:hidden;
    border:1px solid #77858f;
    padding:10px;
    margin-top:10px;
}

.inputgroup .sliders{
    margin:20px;
    
}
.inputgroup .slider-body{
    padding-top:20px;
    height:200px;
    overflow:auto;
}
/**/
.matrix3d .amatrix{
    border-left:1px solid black;
    border-right:1px solid black;
}

.matrix3d .amatrix .amatrix-col{
    display:inline-block;
    width:20%;
    overflow:hidden;
    
}


    
</style>
</head>
<body>
<div class="image-container layui-container">
    <div class="layui-row layui-col-space15">
        <!--圖片-->
        <div class="layui-col-xs8 imgs-container">
            <div class="imgs">
                <img src="img/8.png"/>
            </div>
            <div class="imgs-transform" style="position:absolute;right:0;bottom:0;z-index:999;">none
            </div>
        </div>
        <div class="layui-col-xs4 command-container">
            <div class="transforms">
                <!--選擇變換方法，單選框-->
                <div class="radiogroup">
                    <form class="layui-form" action="" lay-filter="example">
                        <p v-for="tType in transformType">
                            <input  type="radio" name="tty" v-bind:value="tType"  v-bind:title="tType" lay-filter="tty" v-model="transform">
                        </p>
                    </form>
                </div>
                <div class="inputgroup">
                    <button class="layui-btn command">應用變換</button> {{transform}}
                
                    <div v-for="item in transformTypeDetail">
                        <!--根據單選框顯示方法參數和數值改變的滑快-->
                        <div v-if="item.type==transform" v-bind:class="transform">
                            <div class="slider-value" style="text-align:center">
                        
                            </div>
                            <div class="slider-body">
                                <div v-for="(i,index) in item.params">
                                    <div class="sliders">
                                        <div v-bind:id="i+index" class="demo-slider"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

    
    
<script src="js/vue.min.js"></script><!--引入vue.min.js-->
<script src="layui/layui.js"></script><!--引入layui的js-->
<script src="js/jquery-3.3.1.min.js"></script><!--引入jquery.js-->
<script>


var image = new Vue({
    el:'.image-container',
    data:{
        transformType:['none',
                       'matrix','matrix3d',
                       'translate','translate3d','translateX','translateY','translateZ',
                       'scale', 'scale3d', 'scaleX', 'scaleY', 'scaleZ',
                       'rotate','rotate3d','rotateX','rotateY','rotateZ',
                       'skew','skewX','skewY',
                       'perspective'],
        transform:"none",
        transformTypeDetail:[
            {'type':'none','params':[],'typeParams':'','defaultValue':[]},
            {'type':'matrix','params':['n','n','n','n','n','n'],
            'typeParams':'<div style="display:inline-block;vertical-align:bottom;border-left:1px solid black;border-right:1px solid black;">\
                            <p><span class="value1">1</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="value3">0</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="value5">0</span></p>\
                            <p><span  class="value2">0</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="value4">1</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="value6">0</span></p>\
                            <p><span>0</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>0</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>1</span></p>\
                        </div>',
            'defaultValue':[1,0,0,1,0,0]},
            {'type':'matrix3d','params':['n','n','n','n','n','n','n','n','n','n','n','n','n','n','n','n'],
            'typeParams':'<div class="amatrix">\
                <div class="amatrix-col"><p class="value1">1</p><p class="value2">0</p><p class="value3">0</p><p class="value4">0</p></div>\
                <div class="amatrix-col"><p class="value5">0</p><p class="value6">1</p><p class="value7">0</p><p class="value8">0</p></div>\
                <div class="amatrix-col"><p class="value9">0</p><p class="value10">0</p><p class="value11">1</p><p class="value12">0</p></div>\
                <div class="amatrix-col"><p class="value13">0</p><p class="value14">0</p><p class="value15">0</p><p class="value16">1</p></div>\
            </div>',
            'defaultValue':[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]},
            {'type':'translate','params':['tx','ty'],'typeParams':'<div><p>tx: <span class="value1">0</span></p><p>ty: <span class="value2">0</span></p></div>','defaultValue':[0,0]},
            {'type':'translate3d','params':['tx','ty','tx'],'typeParams':'<div><p>tx: <span class="value1">0</span></p><p>ty: <span class="value2">0</span></p><p>tz: <span class="value3">0</span></p></div>','defaultValue':[0,0,0]},
            {'type':'translateX','params':['tx'],'typeParams':'<div><p>tx: <span class="value1">0</span></p></div>','defaultValue':[0]},
            {'type':'translateY','params':['ty'],'typeParams':'<div><p>ty: <span class="value1">0</span></p></div>','defaultValue':[0]},
            {'type':'translateZ','params':['tz'],'typeParams':'<div><p>tz: <span class="value1">0</span></p></div>','defaultValue':[0]},
            {'type':'scale','params':['x','y'],'typeParams':'<div><p>x: <span class="value1">1</span></p><p>y: <span class="value2">1</span></p></div>','defaultValue':[1,1]},
            {'type':'scale3d','params':['x','y','x'],'typeParams':'<div><p>x: <span class="value1">1</span></p><p>y: <span class="value2">1</span></p><p>z: <span class="value3">1</span></p></div>','defaultValue':[1,1,1]},
            {'type':'scaleX','params':['x'],'typeParams':'<div><p>x: <span class="value1">1</span></p></div>','defaultValue':[1]},
            {'type':'scaleY','params':['y'],'typeParams':'<div><p>y: <span class="value1">1</span></p></div>','defaultValue':[1]},
            {'type':'scaleZ','params':['z'],'typeParams':'<div><p>z: <span class="value1">1</span></p></div>','defaultValue':[1]},
            {'type':'rotate','params':['angle'],'typeParams':'<div><p>angle: <span class="value1">0deg</span></p></div>','defaultValue':[0]},
            {'type':'rotate3d','params':['x','y','x','angle'],'typeParams':'<div><p>x: <span class="value1">0.5</span></p><p>y: <span class="value2">0.5</span></p><p>z: <span class="value3">0.5</span></p><p>angle: <span class="value4">0deg</span></p></div>','defaultValue':[0,0,1,0]},
            {'type':'rotateX','params':['angle'],'typeParams':'<div><p>x: <span class="value1">1</span></p></div>','defaultValue':[1]},
            {'type':'rotateY','params':['angle'],'typeParams':'<div><p>y: <span class="value1">1</span></p></div>','defaultValue':[1]},
            {'type':'rotateZ','params':['angle'],'typeParams':'<div><p>z: <span class="value1">1</span></p></div>','defaultValue':[1]},
            {'type':'skew','params':['x-angle','y-angle'],'typeParams':'<div><p>x-angle: <span class="value1">0deg</span></p><p>y-angle: <span class="value2">0deg</span></p></div>','defaultValue':[0,0]},
            {'type':'skewX','params':['angle'],'typeParams':'<div><p>angle: <span class="value1">0deg</span></p></div>','defaultValue':[0]},
            {'type':'skewY','params':['angle'],'typeParams':'<div><p>angle: <span class="value1">0deg</span></p></div>','defaultValue':[0]},
            {'type':'perspective','params':['n'],'typeParams':'<div><p>n: <span class="value1">0px</span></p></div>','defaultValue':[0]},
        ],
        silderValue:[]
        
    }    
});
image.$watch('transform', function(nval, oval) {
    $('.command').click();/*切換方法時，將以前的效果清空，切換到新方法的初始狀態*/
    var type = nval;
    var beginValue = 50;
    if(type.indexOf('scale')>-1){
        beginValue = 100/5;
    }
    $('.'+type).find('.demo-slider').each(function(index,element){
        layui.use(['slider'], function(){
            var slider = layui.slider;
            slider.render({
                elem: element
                ,value: beginValue
                ,theme: '#5FB878' //主題色
                ,setTips: function(value){ //自定義提示文本，根據類型得到不一樣數據
                    var ind = image.transformType.indexOf(type);//獲取類型下標
                    var defaultValue = image.transformTypeDetail[ind].defaultValue[index];//默認值
                    if(type.indexOf('translate')>-1||type=="perspective"){
                        value = (value-50)+'px';    
                    }
                    else if(type.indexOf('scale')>-1){
                        value = value*5.0/100;//倍數
                    }
                    else if(type=='rotate3d'&&index!=3){
                        value = value*1.0/100;//0-1的矢量值
                    }
                    else if(type.indexOf('rotate')>-1||type.indexOf('skew')>-1){
                        value = value-50+'deg';//角度，有正有負，表明順時針或者逆時針
                    }
                    else{
                        if(type=='matrix'&&(index==4||index==5)){
                            value = (value-50);
                        }
                        else{
                            value = defaultValue+(value-50)*5.0/100;
                        }
                        
                    }

                    return value;
                }
                ,change: function(value){
                    /*滑塊數值改變時，改變顯示的數值，同時改變變換的方法*/
                    $('.'+type+' .slider-value .value'+(index+1)).html(value);
                    $('.command').click();
                    
                }
            });

        });
    });
    
    var index = this.transformType.indexOf(type);//獲取類型下標
    $('.'+type).data('index',index);
    $('.'+type).find('.slider-value').html(this.transformTypeDetail[index].typeParams);
});

window.onload=function(){
    /*綁定着觸發應用transform的監聽器*/
    $('.command').on('click',function(){
        var type = image.transform;
        var index = image.transformType.indexOf(type);//獲取類型下標
        var len = image.transformTypeDetail[index].params.length;
        /*生成transform方法*/
        transformFn = type;
        if(len>0){
            transformFn = transformFn+'(';
            for(var i=0;i<len;i++){
                if(i!=0) transformFn = transformFn+',';
                
                var value = $('.'+type+' .slider-value .value'+(i+1)).text();
                if(value=='undefine'||value==''){
                    transformFn='none';
                    break;
                }
                transformFn = transformFn+value;
                if(i==len-1){
                    transformFn = transformFn+')';
                }
            }
            
        }
        
        $('.imgs-transform').html(transformFn);
        $('.image-container .imgs img').css({
            '-ms-transform':transformFn,/* IE 9 */
            '-moz-transform':transformFn,/* Firefox */
            '-webkit-transform':transformFn,/* Safari and Chrome */
            '-o-transform':transformFn, /* Opera */
            '-transform':transformFn
        });
        
    })
    
    
}
layui.use(['form', 'layer', 'slider'], function(){
    var form = layui.form
    ,slider = layui.slider
    ,layer = layui.layer;
  
    form.on('radio(tty)', function(data){
        image.transform = data.value; //被點擊的radio的value值
    }); 
  
    

});


</script>

</body>
</html>

transform.html

界面：

參考：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。