<!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. Log4net使用(一)

    LogHelper.cs using NLog; using NLog.Targets; namespace MyProject.Tool.Log { public class LogHelper { ...

  2. Android activity跳转方式

    方法一:通过SetContentView切换Layout来实现界面的切换,这种方法相当于重绘Activity. protected void onCreate(Bundle savedInstance ...

  3. 模拟发送http请求

    1.httpie 2.postman:Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件. 3.fiddler

  4. 顺序队列的C语言实现

    #include <stdio.h> #define MAXSIZE 101 #define ELEMTYPE int #define QUEUE_EMPTY -10000 typedef ...

  5. DEDE列表页直接获取下载链接

    我们得去设置软件频道的东西,先点击“核心”->"内容管理模型"中的软件模型进行编辑,将softlinks加入列表字段. 然后进入“系统”->"软件频道设置&q ...

  6. nutch-介绍

    本文主要源于http://www.ibm.com/developerworks/cn/opensource/os-cn-nutchintro/ 基本信息 Nutch是一个开放源代码(open-sour ...

  7. Android UI性能优化实战, 识别View中的性能问题

    出自:[张鸿洋的博客]来源:http://blog.csdn.net/lmj623565791/article/details/45556391 1.概述 2015年初google发布了Android ...

  8. (String)、toString、String.valueOf的区别

    String.valueOf()它可以将JAVA基本类型(int,double,boolean等)和对象(Object)转换成String型toString()是对象的方法,它可以将该对象转换成Str ...

  9. python 学习笔记6（数据库 sqlite）

    26. SQLite 轻量级的关系型数据库 SQLite是python自带的数据库,可以搭配python存储数据,开发网站等. 标准库中的 sqlite3 提供该数据库的接口. 1. 基本语法如下 c ...

  10. hadoop-MapReduce分布式计算框架

    计算框架: MapReduce:主要用于离线计算 Storm:流式计算框架,更适合做实时计算 stack:内存计算框架,快速计算 MapReduce设计理念: --何为分布式计算 --移动计算,而不是 ...