随手记录---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%{ } ...
随机推荐
- HDU 4572 Bottles Arrangement
具体的证明:点击打开链接 我的想法: 要想保证题目所说 构造最小行的和,仅仅能是这样的情况 ..... m-3 m-2 m-1 m | m m-1 m-2 m-3 ...
- Introduction to IIS Architectures
https://docs.microsoft.com/en-us/iis/get-started/introduction-to-iis/introduction-to-iis-architectur ...
- BZOJ 3211 线段树+并查集
思路: 我们很容易发现 一个数开根号 开几(很小)次 就到了1 1 再怎么开 都是1 由于这个性质 我们就可以用并查集 了 //By SiriusRen #include <cmath> ...
- CORS with Spring MVC--转
原文地址:http://dontpanic.42.nl/2015/04/cors-with-spring-mvc.html CORS with Spring MVC In this blog po ...
- iOS菜鸟成长笔记（1）——第一个iOS应用
前言:阳光小强最近抽时间学习iOS开发,在学习过程中发现了很多有趣的东西也遇到了很多问题,为了在学习过程中能和大家交流,记录下学习的心得和学习成果,所以就有了这一个系列文章,希望这一系列文章能形成一个 ...
- Python(二) 表示‘组’的概念与定义
现实世界中总存在一组一组的事物, 一.列表的定义 type(['hello','world',1,9,True,False]) = <class 'list'> type([[1,2,3, ...
- vue.js路由vue-router（一）——简单路由基础
前言 vue.js除了拥有组件开发体系之外,还有自己的路由vue-router.在没有使用路由之前,我们页面的跳转要么是后台进行管控,要么是用a标签写链接.使用vue-router后,我们可以自己定义 ...
- H+后台主题UI框架---整理
本篇文章是对H+这种框架进行整理,顺便了解一下标准的代码规范的写法. 一.表单: 1).下面是一个基本表单: 现在来看这个表单的结构: 1.整个表单的外框结构是一个div,至于padding和marg ...
- PatentTips - Device virtualization and assignment of interconnect devices
BACKGROUND Standard computer interconnects, particularly for personal computers or workstations, may ...
- SFINAE 模板替换失败而非报错的应用
体会这一个例子,检查是否是一个类:P187