随手记录---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%{ } ...
随机推荐
- Hadoop集群管理--保证集群平稳地执行
本篇介绍为了保证Hadoop集群平稳地执行.须要深入掌握的知识.以及一些管理监控的手段,日常维护的工作. HDFS 永久性数据结构 对于管理员来说.深入了解namenode,辅助namecode和da ...
- 6个技巧加速你的gradle编译
近期我们都在讨论build系统,我们看了一些技巧能够让你的Maven build更快. 结论和反映都势不可挡.由于我们提供的技巧,很多其它的人都非常高兴能加快他们完毕自己的项目.如今,让我们看一下怎么 ...
- JSP脚本连接数据库
入门 简单的jsp文件 <%-- Created by IntelliJ IDEA. User: e550 Date: 2017/1/9 Time: 23:24 To change this t ...
- BZOJ 1598 第k短路
思路: 先反向建图 Dijkstra一遍 求出h数组 再正向建图 A_star一遍 搞定 //By SiriusRen #include <queue> #include <cstd ...
- POJ 1191 记忆化搜索
(我是不会告诉你我是抄的http://www.cnblogs.com/scau20110726/archive/2013/02/27/2936050.html这个人的) 一开始没有想到要化一下方差的式 ...
- Docker安装配置教程
Docker公开课 1 Docker介绍 1.1 Docker是什么 云计算\云服务 IAAS(基础设施即服务).PAAS(平台即服务).SAAS(软件即服务) Docker到底是什么呢? Docke ...
- android图片资源的适配问题
原文: http://hi.baidu.com/weiyousheng/blog/item/c622d701b9dec6c2277fb5cc.html 在之前的版本中,只有一个drawable,而2. ...
- 常用sql语句及案例
目录 1)基本 2)数学函数 3)rownum 4)分页 5)时间处理 6)字符函数 7)to_number 8)聚合函数 9)学生选课 10)图书馆借阅 基本 --新建表: create table ...
- Vuejs2.0构建一个彩票查询WebAPP(2)
一,Vuex的使用 import Vue from 'vue' import Vuex from 'vuex' import MsgModules from './MsgModules' Vue.us ...
- 使用scatter画散点图
刚开始接触Python,照着例子写的代码,百度注释的. from numpy import * import matplotlib import matplotlib.pyplot as plt im ...