随手记录---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:;
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> <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
界面：
参考：
随手记录---transform 属性的更多相关文章
- 图层的transform属性
Main.storyboard // // ViewController.m // 7A11.图层的transform属性 // // Created by huan on 16/2/4. // ...
- 通过transform属性改变图片的位置大小等信息
对UIImageView的位置大小方向的改变可以通过改变其transform属性值实现. 位置改变: var transform = CGAffineTransformMakeTranslation( ...
- 2016 - 1- 14 UI阶段学习补充 transform属性详解
UIView的transform属性 transform是view的一个重要属性,它在矩阵层面上改变view的显⽰状态,能实现view的缩放.旋转.平移等功能.transform是CGAffineTr ...
- transform属性
transform属性 在OC中,通过transform属性可以修改对象的平移.缩放比例和旋转角度常用的创建transform结构体方法分两大类 (1) 创建“基于控件初始位置”的形变 CGAffin ...
- 理解SVG坐标系统和变换： transform属性
SVG元素可以通过缩放,移动,倾斜和旋转来变换-类似HTML元素使用CSS transform来变换.然而,当涉及到坐标系时这些变换所产生的影响必然有一定差别.在这篇文章中我们讨论SVG的transf ...
- Swift - 通过设置视图的transform属性实现动画
设置视图对象的transform属性,可以实现各种动画效果. 1,移动 指在同一平面内,将控件按照某个直线方向平移一定的距离. 1 2 3 4 5 //每次都从当前位置平移 self.imageVie ...
- 11--tag 和transform属性
tag 和transform属性 1.tag 标签,就相当于身份识别的标码,可以通过tag值获取对应的对象. 2.使用transform 实现对象的平移和旋转. // // ViewControlle ...
- IOS(二)基本控件UIButton、简易动画、transform属性、UIImageView
UIButton //1.设置UIButton 的左右移动 .center属性 获得 CGPoint 来修改x y //1.设置UIButton 的放大缩小 bounds属性 获得CGRect 然后通 ...
- animation，transform属性
animation属性 使用@keyfarmes属性开启动画步骤 结构体:@keyfarmes name{ from{ } to{ } } @keyfarmes name{ 0%{ } 50%{ } ...
随机推荐
- 【图像配准】基于互信息的图像配准算法：MI、EMI、ECC算法
简单介绍: 基于互信息的图像配准算法以其较高的配准精度和广泛的适用性而成为图像配准领域研究的热点之中的一个.而基于互信息的医学图像配准方法被觉得是最好的配准方法之中的一个.基于此.本文将介绍简单的基于 ...
- POJ 1671 第二类斯特林数
思路: 递推出来斯特林数 求个和 if(i==j)f[i][j]=1; else f[i][j]=f[i-1][j-1]+f[i-1][j]*j; //By SiriusRen #include &l ...
- HDU 5371 Hotaru's problem Manacher+尺取法
题意:给你一个序列,求最长的两段回文子串,要求他们共用中间的一半. 思路:利用Manacher求出p[i]表示的当前位置的最长回文串长度,然后把每一个长度大于等于2的回文串的左区间和右区间分别放到两个 ...
- excel2007去掉方括号及里面的
获取括号外面的 b2=LEFT(A1,FIND("[",A1)-1) 获取括号里面的 =MID(A2,FIND("(",A2)+1,(FIND(")& ...
- 基于SIFT的点云关键点提取
这篇博文主要介绍SIFT算法在提取点云图像关键点时的具体用法. 尺度不变特征转换(Scale-invariant feature transform,SIFT)是David Lowe在1999年发表, ...
- Python正则表达式初识（十）附正则表达式总结
今天分享正则表达式最后一个特殊字符“\d”,具体的教程如下. 1.特殊字符“\d”十分常用,其代表的意思是数字.代码演示如下图所示. 其中“+”的意思是表示连续,在这里代表的意思是连续的数字.但是输出 ...
- javaScript call与apply学习笔记
call和apply是借用他人的函数实现自己到功能,具体表现在改变this指向,借用他人方法 而不同的地方是call是把实参按照形参的个数传入,而apply传入的是一个数组(argument) 写一个 ...
- vue 常用ui组件库
vux github ui demo:https://github.com/airyland/vux Mint UI 项目主页:http://mint-ui.github.io/#!/zh-cn de ...
- 具体解释window.location
window.location 对象所包括的属性 hash//从井号 (#) 開始的 URL(锚) host//主机名和当前 URL 的port号 hostname//当前 URL 的主机名 href ...
- H.264视频编解码SoC满足高清DVR设计需求
硬盘录像机(DVR)作为监控系统的核心部件之一,在10年里高速发展,从模拟磁带机的替代品演变成具有自己独特价值的专业监控数字平台,并被市场广泛接受.监控系统伴随DVR这些年的发展向着IP化.智能化发展 ...