<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css变形功能</title>
<style>
body{
background-color: #b9eef0;
}
h3,p{
margin:100px 0px;
padding-bottom: 10px;
border-bottom:1px dotted rgb(74, 5, 91);
font:bold 20px "微软雅黑";
}
h3:first-child,p{
margin-top:20px;
}
h1{
font:bold 30px "微软雅黑";
margin-top:120px;
}
span{
font:bold 20px "微软雅黑";
}
div{
width: 200px;
height: 50px;
display: inline-block;
padding: 15px;
box-sizing: border-box;
background-color: rgba(113, 0, 208, 0.57);
text-align: center;
line-height: 50px;
font:500 14px "微软雅黑";
color: #fff;
}
.rotate{
-webkit-transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
-ms-transform: rotate(-25deg);
-o-transform: rotate(-25deg);
transform: rotate(-25deg);
}
.scale{
-webkit-transform: scale(0.875,-3);
-moz-transform: scale(0.875,-3);
-ms-transform: scale(0.875,-3);
-o-transform: scale(0.875,-3);
transform: scale(0.875,-3);
/*transform: scaleX(0.63);*/
/*transform:scaleY(0.64);*/
/*可以這兩個這樣單獨的設置，就可以单独设置是x轴缩放还是y轴缩放了，或者设置两个值得时候，其中一个设为0也可以这种效果*/
}
.translate{
-webkit-transform: translate(30px,40px);
-moz-transform: translate(30px 40px);
-o-transform: translate(30px 40px);
-ms-transform: translate(30px 40px);
transform: translate(30px 40px);
}
.skew{
-webkit-transform: skew(-5deg,45deg);
-moz-transform: skew(-5deg,45deg);
-ms-transform: skew(-5deg,45deg);
-o-transform: skew(-5deg,45deg);
transform: skew(-5deg,45deg);
}
.jihe1{
-webkit-transform: translate(20px,34px) scale(2,0.76) rotate(75deg);
-moz-transform: translate(20px,34px) scale(2,0.76) rotate(75deg);
-ms-transform: translate(20px,34px) scale(2,0.76) rotate(75deg);
-o-transform: translate(20px,34px) scale(2,0.76) rotate(75deg);
transform: translate(20px,34px) scale(2,0.76) rotate(75deg);
}
.jihe2{
-webkit-transform: rotate(75deg) scale(2,0.76) translate(20px,34px);
-moz-transform: rotate(75deg) scale(2,0.76) translate(20px,34px);
-ms-transform: rotate(75deg) scale(2,0.76) translate(20px,34px);
-o-transform: rotate(75deg) scale(2,0.76) translate(20px,34px);
transform: rotate(75deg) scale(2,0.76) translate(20px,34px);
}
.jihe3{
-webkit-transform: translate(20px,34px) rotate(75deg) scale(2,0.76);
-moz-transform: translate(20px,34px) rotate(75deg) scale(2,0.76);
-ms-transform: translate(20px,34px) rotate(75deg) scale(2,0.76);
-o-transform: translate(20px,34px) rotate(75deg) scale(2,0.76);
transform: translate(20px,34px) rotate(75deg) scale(2,0.76);
}
.origin{
width:130px;
height:130px;
background: rgba(0, 65, 212, 0.57);
margin: 0px 100px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.origin1{}
.origin2{
-webkit-transform-origin:right bottom;
-moz-transform-origin:right bottom;
-ms-transform-origin:right bottom;
-o-transform-origin:right bottom;
transform-origin:right bottom;
margin-top:50px;
}
.hover{
width: 240px;
height: 250px;
display: inline-block;
padding: 15px;
cursor: pointer;
-webkit-transform-origin:right bottom;
-moz-transform-origin:right bottom;
-ms-transform-origin:right bottom;
-o-transform-origin:right bottom;
transform-origin:right bottom;
}
.hover:hover{
-webkit-transform: translate(30px,45px) rotate(25deg) scale(0.92,0.45);
-moz-transform: translate(30px,45px) rotate(25deg) scale(0.92,0.45);
-ms-transform: translate(30px,45px) rotate(25deg) scale(0.92,0.45);
-o-transform: translate(30px,45px) rotate(25deg) scale(0.92,0.45);
transform: translate(30px,45px) rotate(25deg) scale(0.92,0.45);
}
</style>
</head>
<body>
<h1 style="margin: 20px auto;">transform详解</h1>
<h3 style="margin: 20px auto;">1,旋转——rotate(读数deg)-正值为顺时针方向，负值的话会是逆时针方向</h3>
<br /><div>单个测试 原图</div>
<div class="rotate">单个测试 rotate</div>
<h3>2,缩放——scale(水平方向,垂直方向)可以是一个，表示整体；int整数值表示放大，float浮点值小数表示缩小倍率。负值的话会倒着翻过来.不用单位</h3>
<br /><div>单个测试 原图</div>
<div class="scale">单个测试 scale</div>
<li style="margin-top:50px">总结：scaleX();scaleY();可以這兩個這樣單獨的設置，就可以单独设置是x轴缩放还是y轴缩放了，或者设置两个值得时候，其中一个设为0也可以这种效果*/</li>
<h3>3,移动——translate(x方向px,y方向px)可以是一个，表示x方向</h3>
<br /><div>单个测试 原图</div>
<div class="translate">单个测试 translate</div>
<li style="margin-top:50px">总结：如果你全部写完了，但是效果还是出不来，发现代码也不报错，那请你检查一下translate属性的括号中是否有逗号，总是把这个逗号丢掉，没有逗号，不报错也不显示效果,这真可怕！！translate(Xpx,Ypx);</li>
<h3>4,倾斜——skew(水平方向deg，垂直方向deg)可以是一个，表示水平方向,可以为负值</h3>
<br /><div>单个测试 原图</div>
<div class="skew">单个测试 skew</div>
<li style="margin-top:100px">总结：skewX();skewY();可以這兩個這樣單獨的設置，就可以单独设置是x轴倾斜还是y轴倾斜了，或者设置两个值得时候，其中一个设为0也可以这种效果*/</li>
<h1>5.接下来对一个元素综合使用多个变形方法制作一个案例。</h1>
<p>注意：这几个变形使用的顺序不一样，效果也不一样.对比如下，很明显啊</p>
<div>综合使用效果 原图</div>
<div class="jihe1">综合使用效果-顺序1</div>
<div class="jihe2">综合使用效果-顺序2</div>
<div class="jihe3">综合使用效果-顺序3</div>
<div style="height:100px;color: #000;background-color: #6f40f7; color: #fff">总结：2和3的效果一样，看来，只要平移和旋转的前后顺序有调整就会有变化，不关缩放的事情</div>
<p style="margin-top:170px;margin-bottom:20px;">这是因为</p>
<p style="margin-bottom:20px;">1.元素的中心点总是在最中间的，而水平平移的方向也是左右，垂直平移的方向是上下。如果先平移，元素的水平和垂直的准线还是和二维坐标的xy轴平行的。自然最后旋转是从中心点旋转不会有影响。<br/>2.但是若先旋转，那么元素的水平线和垂直线都发生了转动，再进行平移的话，就是在旋转后的方向基础上向前移动。具体见下图</p>
<img src="data:images/transform1.jpg"/>
<span>先平移后旋转</span>
<img src="data:images/transform.jpg"/>
<span>先旋转后平移</span>
<p></p>
<h1 style="margin-top: 10px;">6.transform-origin改变动画变形的基准点</h1>
<div class="origin origin1 style="margin-top: 10px;">
我是没有设置origin的
</div>
<div class="origin origin2">
我是设置了origin的
</div>
<p>總結：共有兩個屬性需要填寫《水平，垂直》：水平有三個點：left，center，right；垂直的有三個點：top，center，bottom</p>
<h1>7.最后综合，来个鼠标移动上去变换效果</h1>
<div class="hover">最后综合，来个鼠标移动上去变换效果</div>
<p><a style="display: block; text-align: center;color: #06304d;font-weight: 100">2016.08.10 00:06;by xing.orgl^</a></p>
</body>
</html>

CSS3-transform变形功能的更多相关文章

  1. CSS3 Transform变形理解与应用

    CSS3 Transform变形理解与应用 Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开 ...

  2. CSS3 transform变形（3D转换）

    一.三维坐标 空间中三维坐标如下图所示: 向上为-Y,向下为+Y,向左为-X,向右为+X,向前为+Z,向后为-Z. 二.perspective(n)为 3D 转换元素定义透视视图 perspectiv ...

  3. css3 transform(变形)笔记

    Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. 一.旋转 ...

  4. CSS3 Transform变形(2D转换)

    Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开始,结束.Animation:对元素某个属性 ...

  5. css3 transform 变形属性详解

    本文主要介绍了css3 属性transform的相关内容,针对CSS3变形.CSS3转换.CSS3旋转.CSS3缩放.扭曲和矩阵做了详细的讲解.希望对你有所帮助. 这个很简单,就跟border-rad ...

  6. css3 transform 变形

    在css3中,用transform可以实现文字或图像的旋转.缩放.倾斜和移动,并且该元素下的所有子元素,随着父元素一样转.缩放.倾斜和移动. transform属性 transform的属性包括:ro ...

  7. CSS3 transform变形（2D转换）

    transform 属性应用于2D 或 3D 转换.该属性允许我们对元素进行平移.旋转.缩放或倾斜. 一.translate(x,y).translateX(n).translateY(n)定义2D平 ...

  8. CSS3的变形transform、过渡transition、动画animation学习

    学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...

  9. CSS3 Transform——transform-origin

    2012年9月,W3C组织发布了CSS3变形工作草案.CSS3变形允许CSS把元素转变为2D 或3D空间,这个草案包括了CSS3 2D变形和CSS3 3D变形. CSS3变形是一些效果的集合,比如平移 ...

  10. css3中变形处理

    transfrom功能 在css3 中可以使用transfrom功能实现文字或图像的旋转,缩放,倾斜,移动等变形处理 deg是css3中使用的一种角度单位. 旋转: 使用rotate方法,在参数中加入 ...

随机推荐

  1. Linux下sysstat工具学习

    Linux下,我们多用ssh链接服务器远程操控.对于系统的监控必不可少,sysstat很不错的监控工具包. sysstat官网:http://sebastien.godard.pagesperso-o ...

  2. ElasticSearch入门系列（六）分布式操作

    一.路由文档到分片 当你索引一个文档的时候,他被存储在单独一个主分片上.Elasticsearch根据一个算法来找到所在分片上. shard=hash(routing)%number_of_prima ...

  3. C#高级特性_Attribute

    Attribute: 公共语言运行时允许你添加类似关键字的描述声明,叫做attributes, 它对程序中的元素进行标注,如类型.字段.方法和属性等.Attributes和Microsoft .NET ...

  4. 1415-2 计科&计高 软件工程博客&Github地址汇总－修正版

    序号 标识 博客 代码 1 1121袁颖 joanyy joanyy 2 1122崔琪 chitty ChittyCui 3 1123吕志浩 lucy123 715lvzhihao 4 1124张静 ...

  5. Bete冲刺第七阶段

    Bete冲刺第七阶段 今日工作: web: 新增通知处理接口 ios: 重写登录逻辑,添加创建行程填写.注册 POP界面 目前所遇问题: web: web目前进展顺利,暂时还没有遇到编码的问题. iO ...

  6. extjs基础 使用图标字体来美化按钮)

    下载 Font Awesome 1.拷贝css 和 fonts 到build同级目录 2.需要在index.html中引入css文件 3.在main.js文件中添加 initComponent : f ...

  7. 表单提交中get和post方式的区别

    表单提交中get和post方式的区别有5点 1.get是从服务器上获取数据,post是向服务器传送数据. 2.get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一 ...

  8. js window.open 打开新窗体 参数设置

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. windows下为mysql添加日志

    mysql的配置文件 [mysqld] …… log-error="D:/phpStudy/log/mysql/mysql_log_err.txt" log="D:/ph ...

  10. the comment lines of the blast tabular format

    进行Blast比对,用参数-m 6 可以以列表的方式输出结果,结果中从左到右每一列的意义分别是: [00] Query id [01] Subject id [02] % identity [03] ...