随手记录---transform 属性

　　其实平时很少用到transform属性，一些放大缩小用width、height可以改变，一些位置变换，更是有margin，而一些旋转、2D、3D变换也不怎么能用得到。不过最近接触了一些图片的缩放，觉得不错，我就进行了一下学习。transform的元素会根据方法进行位置大小等的变换，但是还占据着原本在文档流中的位置。

　　呃……比想象的麻烦，主要是做了个界面。transform是前端做3D的基础，想要做得好，还是得费点心思的，这里只记录一下基本的用法吧。使用transform的时候兼容的写法如下所示，下文就直接使用transform。

.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);
    }

1、matrix

　　matrix(n1,n2,n3,n4,n5,n6)和4*4矩阵matrix3d是变换图形的基本矩阵，学过图像处理的应该比较清楚，我懒得再仔细看了，毕竟这两个方法也不怎么常用到，使用后面的方法大概都可以解决大部分需求了，简单讲讲。

　　matrix(n1,n2,n3,n4,n5,n6)对应的是3*3矩阵（如下所示），只是其中的六个值，matrix的初始状态是matrix(1,0,0,1,0,0);

　　matrix3d()对应的4*4矩阵如下，它的初始状态是matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)

　　　　

 2、none

　　初始状态，不做任何变换，对应着矩阵的单位矩阵

 

3、translate方法

　　进行位置的偏移，包括translate(x,y),translate3d(x,y),translateX(x),translateY(y),translateZ(z)。初始状态三个参数x，y，z都为0px，其正数分别为向右，下，靠近人的方向移动，因为我用的图片是在2D平面上的，其中z的偏移我看不出明显的区别，配合其他方法（如rotate应该可以看出来）。

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

4、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);    
}

 

5、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);
}

 

6、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);    
}

7、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

 

界面：

 2020.09.10回来看发现代码难跑出来，再改了一份直接复制可用。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--<link rel="stylesheet" href="layui/css/layui.css"><!--引入layui的css-->
<link rel="stylesheet" href="https://heerey525.github.io/layui-v2.4.3/layui/css/layui.css"><!--引入layui的css-->
<style>
/*图片容器样式*/
.image-container .imgs-container{
    background:#E9E9E9;
    height:600px;
    //text-align:center;
    position:relative;
    margin:100px auto;
    //border:red solid 2px;
}

.image-container .imgs{
    margin:100px 50px;
    margin-bottom:0;
    width:300px;
    background:white;
    padding:10px;
    display:inline-block;
}
.image-container .imgs #img{
    width:100px;
    height:100px;
    margin-bottom:0;
    background-color:red;
    display:inline-block;
}
/**/
.image-container .command-container{
    position:absolute;
    top:0;
    right:0;
}
/*单选部分*/
.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">
                <div id="img"></>
            </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>
<script src="layui/layui.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
-->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script><!--引入vue.min.js-->
<script src="https://heerey525.github.io/layui-v2.4.3/layui/layui.js"></script><!--引入layui的js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.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>    <span class="value3">0</span>    <span class="value5">0</span></p>\
                            <p><span  class="value2">0</span>    <span class="value4">1</span>    <span class="value6">0</span></p>\
                            <p><span>0</span>    <span>0</span>    <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

 

 

参考：

rotate3d() 

matrix - matrix3d介绍

posted @ 2019-01-26 10:28  l.w.x  阅读(237)  评论(0)  编辑  收藏  举报