<!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. js的单引号，双引号，转移符

    这里我们看到想在style后边在插入一个样式的变量,data.cssSytle.a是做边和邮编都是"",并且没有转移符

  2. Redis的五种数据结构

    Redis支持持久化只是它的一件武器,它提供了多达5种数据存储方式: 一  string(字符串) string是最简单的类型,你可以理解成与Memcached一模一样的类型,一个key对应一个val ...

  3. [HDOJ5451]Best Solver(乱搞）

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=5451 分析:A=5+2根号6 B=6-2根号6 n=1+2^x 那么A^n+B^n是整数 注意到0< ...

  4. C语言文件的读写

    对文件的读和写是最常用的文件操作.在C语言中提供了多种文件读写的函数: 字符读写函数  :fgetc和fputc 字符串读写函数:fgets和fputs 数据块读写函数:freed和fwrite 格式 ...

  5. C#之发送邮件汇总

    最近想搞个网站,其中找回密码用到了我们常见到的利用邮箱找回.利用邮箱的好处是可以有效确认修改密码者的身份. 百度了几篇博客,各有千秋.最终采用了QI Fei同志的博客,有Demo下载,看了看思路清晰, ...

  6. Jquery-EasyUI学习2~

    下面这个Demo用的是MVC+Ado.Net.存储过程 实现功能:分页查询,添加.修改功能.模糊查询功能 先来几张效果图: 创建存储过程如下 go create proc usp_FenYe2 @se ...

  7. webpack进阶之插件篇

    一.插件篇 1. 自动补全css3前缀 autoprefixer 官方是这样说的:Parse CSS and add vendor prefixes to CSS rules using values ...

  8. [weird problem] the xm file transfered by wcf,some sections in it were always repeated

    some sections in xml are always repeated,I received these file by wcf. I thought it's caused by buff ...

  9. android 布局之scrollview

    今天在布局页面的时候后犯了难,我要显示的内容一个页面展示不完,怎么办呢? 于是随便找了个app点开一看,哎呀原来还能翻动啊!这是啥布局呢?原来是ScrollView 官方api相关的内容全是英文,这可 ...

  10. [Google Guava]学习--新集合类型Multiset

    Guava提供了一个新集合类型Multiset,它可以多次添加相等的元素,且和元素顺序无关.Multiset继承于JDK的Cllection接口,而不是Set接口. Multiset主要方法介绍: a ...