css3中transform属性实现平移与变形
0×1.元素平移
让元素在页面显示中产生位移有很多方法，可以利用块状元素合模型，也可以利用相对和绝对坐标，这一小节给大家介绍css提供的两个元素移动属性：vertical-align和transform；transform为css3标准提供的新属性。
a.内联元素垂直平移
内联元素的平移遵循下面的法则：
默认情况下，元素移动，负值往下，正值往上；
如果默认基线在上面，用负数；
如果默认基线在下面，用正值；
下面用一个实例来演示上面这三条法则：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>内联元素垂直平移实例</title>
<style type="text/css">
<!--设置div的宽高背景色-->
#d1{
width: 250px;
height: 150px;
background-color: pink;
color: black;
}
<!--默认情况下div中span的基准线在上方，所以使用负值让div中的span元素往下移动50px-->
#d1 span{
vertical-align: -50px;
}
<!--不允许调整textarea大小-->
#tx1{
resize: none;
}
<!--在textarea文本框前面的span，默认基准线在下方（与textarea的底部对齐），所以使用正值，让span标签往上移动35px-->
#sp1{
vertical-align: 35px;
}
</style>
</head>
<body>
<div id="d1">
<span>www.111cn.net</span>
</div>
<br>
<span id="sp1">自我介绍：</span><textarea name="myself" id="tx1" cols="10" rows="5"></textarea>
</body>
</html>
显示效果：
www.111cn.net
自我介绍：
b.块状元素平移
所有内联元素都可以使用display属性转换成块状元素，然后使用本节内容介绍的平移方法，transform属性是css3提供的新属性，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>块状元素平移实例</title>
<style type="text/css">
#d1{
width: 250px;
height: 250px;
background-color: pink;
}
<!--未设置平移前，d2应该紧贴着d1上左边框，本例让d2往右偏移50px，往下偏移100px（如果是负值就是往反方向），若是想单独设置一个方向上的平移，可以将不需要设置的方向上的值用0px代替，例如transform:translate(50px,0px);，除此之外css还提供了两个子属性translateX和translateY，分别用于设置X方向（左右，正右负左）和Y方向（上下，正下负上）上的偏移量。-->
#d2{
background-color: green;
width: 50px;
height: 50px;
transform:translate(50px,100px);
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
</div>
</body>
</html>
显示效果：
0×2.元素变形
a.等比例缩放
等比例缩放能够使元素等比扩大或缩小我们设定的倍数，语法如下：
transform: scale(n);
n默认为1，元素保持正常大小显示，超过1就是等比扩大多少倍（长宽同时扩大），小于1就是等比缩小多少倍；
除此之外，同translate一样，scale也可以单独设置某一条边的缩放，scaleX(n)单独扩大或缩小元素宽度，scaleY(n)单独扩大或缩小元素高度。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>块状元素缩放实例</title>
<style type="text/css">
<!--d1的原始宽高是100px，默认情况下会显示一个正方形，现在使用scale将其宽度扩充2倍，高度缩小成原来的一半，这种缩放或扩充会影响到其内部的所有元素-->
#d1{
width: 100px;
height: 100px;
background-color: pink;
transform:scale(2,0.5);
color:black;
}
</style>
</head>
<body>
<div id="d1">www.111cn.net</div>
</body>
</html>
显示效果：
b.旋转
块状元素的旋转可以通过transform的rotate值来实现，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>块状元素旋转实例</title>
<style type="text/css">
<!--将d1顺时针旋转45度，如果要逆时针旋转，设置成负值即可-->
#d1{
width: 100px;
height: 100px;
background-color: pink;
transform:rotate(45deg);
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
显示效果：
默认情况下，元素旋转的基准点为块状元素的中心点，可以通过设置transform-origin属性来改变旋转的基准点位置，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>设置旋转基准点实例</title>
<style type="text/css">
#d1{
width: 50px;
height: 50px;
margin: 20px;
background-color: pink;
transform:rotate(30deg);
}
<!--设置基准点为div左上角原点（top left），默认为transform-origin:center center;即中心点，图形基准点位置保持不变，绕着基准点旋转;-->
#d2{
width: 50px;
height: 50px;
margin: 20px;
background-color: pink;
transform:rotate(30deg);
transform-origin:0 0;
}
</style>
</head>
<body>
<div id="d1"></div>
<br>
<div id="d1"></div>
</body>
</html>
显示效果：
c.倾斜
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>块状元素倾斜实例</title>
<style type="text/css">
#d1{
width: 100px;
height: 100px;
background-color: pink;
<!--X轴倾斜45度，正值向左，负向右，同transform:skewX(45deg);-->
transform:skew(45deg,0deg);
}
#d2{
width: 100px;
height: 100px;
background-color: pink;
<!--Y轴倾斜45度，正值向下，负向上，同transform:skewY(45deg);-->
transform:skew(0deg,45deg);
}
</style>
</head>
<body>
<div id="d1"></div>
<br>
<div id="d2"></div>
</body>
</html>
相关文章
- 这篇文章主要介绍了C# 字段和属性的的相关资料，文中示例代码非常详细，供大家参考和学习，感兴趣的朋友可以了解下...2020-11-03
- php语言实现redis的客户端与服务端有一些区别了因为前面介绍过服务端了这里我们来介绍客户端吧，希望文章对各位有帮助。 为了更好的了解redis协议，我们用php来实现...2016-11-25
- 有时我们在页面上需要选择数值范围，如购物时选取价格区间，购买主机时自主选取CPU，内存大小配置等，使用直观的滑块条直接选取想要的数值大小即可，无需手动输入数值，操作简单又方便。HTML首先载入jQuery库文件以及jRange相关...2015-03-15
- 本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果。分享给大家供大家参考，具体如下：这是一款纵向布局的CSS+JavaScript滑动门代码，相当简洁的手法来实现，如果对颜色不满意，你可以试着自己修改CSS代码，这个滑动门将每一...2015-10-21
- 本篇文章是对C#中WinForm控件之Dock顺序调整进行了详细的分析介绍，需要的朋友参考下...2020-06-25
- js修改input的type属性有些限制。当input元素还未插入文档流之前，是可以修改它的值的，在ie和ff下都没问题。但如果input已经存在于页面，其type属性在ie下就成了只读属性了，不可以修改。...2013-10-19
jQuery+slidereveal实现的面板滑动侧边展出效果
我们借助一款jQuery插件：slidereveal.js，可以使用它控制面板左右侧滑出与隐藏等效果，项目地址：https://github.com/nnattawat/slideReveal。如何使用首先在页面中加载jquery库文件和slidereveal.js插件。复制代码 代码如...2015-03-15- 翻板抽奖的实现流程：前端页面提供6个方块，用数字1-6依次表示6个不同的方块，当抽奖者点击6个方块中的某一块时，方块翻转到背面，显示抽奖中奖信息。看似简单的一个操作过程，却包含着WEB技术的很多知识面，所以本文的读者应该熟...2015-10-21
SQLMAP结合Meterpreter实现注入渗透返回shell
sqlmap 是一个自动SQL 射入工具。它是可胜任执行一个广泛的数据库管理系统后端指印, 检索遥远的DBMS 数据库等，下面我们来看一个学习例子。 自己搭建一个PHP+MYSQ...2016-11-25- 这篇文章主要介绍了C# Winform中实现主窗口打开登录窗口关闭的方法,这在需要用户名密码的软件项目中是必用的一个技巧,要的朋友可以参考下...2020-06-25
- 这篇文章主要为大家介绍了Vue的计算属性，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助...2021-11-16
- 下面小编就为大家带来一篇C# winform打开Excel文档的方法总结(必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2020-06-25
antd Form组件方法getFieldsValue获取自定义组件的值操作
这篇文章主要介绍了antd Form组件方法getFieldsValue获取自定义组件的值操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29- 复制代码 代码如下: // 第一种写法 $da = date("w"); if( $da == "1" ){ echo "今天是星期一"; }else if( $da == "2" ){ echo "今天是星期二"; }else if( $da == "3" ){ echo "今天是星期三"; }else if( $da == "4"...2013-10-04
- 这篇文章主要给大家介绍C# winform快捷键设置技巧，涉及到C winform快捷键相关知识，对C winform知识感兴趣的朋友可以参考下本篇文章...2020-06-25
c#中Winform实现多线程异步更新UI（进度及状态信息）
本篇文章主要介绍了c#中Winform实现多线程异步更新UI（进度及状态信息） ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2020-06-25- 这篇文章主要介绍了C#实现windows form限制文本框输入的方法,涉及C#限制文本框输入的技巧,非常具有实用价值,需要的朋友可以参考下...2020-06-25
- js里面设置DOM节点透明度的函数属性：filter= "alpha(opacity=" + value+ ")"（兼容ie）和opacity=value/100（兼容FF和GG）。 先来看看设置透明度的兼容性代码： 复制代码 代码如下: function setOpacity(ele, opacity) { if (...2014-06-07
C# Dynamic关键字之:调用属性、方法、字段的实现方法
本篇文章是对C#中调用属性、方法、字段的实现方法进行了详细的分析介绍，需要的朋友参考下...2020-06-25- 这篇文章主要介绍了angularjs $http实现form表单提交示例，非常具有实用价值，需要的朋友可以参考下 ...2017-06-15