<!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变形属性、2D变形、3D变形

    第十五章:transform变形属性 一.2D变形 1. rotate()旋转属性值 2. translate()位移属性值 3. scale()缩放属性值 4. skew()倾斜属性值 5. tra ...

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

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

  4. CSS3中的transform变形

    在CSS3中,用Transform功能可以实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形,这四种变形分别使用rotate.scale.skew和translate这四种方法来实现.将这四种变形 ...

  5. CSS 变形(CSS3) transform

    一.2D变形(CSS3) transform transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前 ...

  6. CSS3——2D变形(CSS3) transform

    让青春吹动了你的长发 2D变形(CSS3) transform 移动 translate(x, y) 缩放 scale(x, y) 旋转 rotate(deg) transform-origin可以调 ...

  7. CSS3新特性详解(三)：CSS3 2D转换和3D转换 transform 变形使用详解

      关于CSS3新特性,在上篇博文中"CSS3新特性详解(二):CSS3 字体@font-face详解.如何创建和修改woff字体文件及text-shadow等文本效果",讨论了C ...

  8. css3transform:skew(),CSS3变形倾斜(CSS3 Transform Skew)

    CSS3变形倾斜(CSS3 Transform Skew) 有谁知道如何实现这样的倾斜: 使用CSS的新变换属性? 你可以看到我正在扭曲两个角落,任何人都知道这是否可行? Does anyone kn ...

  9. css中变形,css3中变形处理

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

  10. 用HTML加css制作立体方块,CSS3 三维变形实现立体方块特效源码

    前言 三维变换使用基于二维变换的相同属性,如果您熟悉二维变换,你们发现3D变形的功能和2D变换的功能类似.3D变形与2D变形的最大不同就在于其参考的坐标轴不同,2D变形的坐标轴是平面的,只存在X轴和Y ...

最新文章

  1. 计算机软件uml,计算机软件——UML旅游管理系统
  2. td 内单选框不可用_材料特殊处理TD、TICN概述
  3. ruby on rails错误undefined method `title#39; for nil:NilClass
  4. 【C++ 语言】pthread_mutex_t 互斥锁
  5. 设计模式--观察者(Observer)模式
  6. 为什么男性比女性死得更早，心疼一秒钟！
  7. MSN-LDL论文修改20211027RBY
  8. javac与java版本不一致
  9. linux 文件上传扫描_SecureCRT实现windows与linux文件上传下载
  10. Spark开发入门与实践(一)
  11. Python学习记录（小甲鱼C的课程）
  12. go 变量与json相互转换
  13. CF1463-C. Busy Robot
  14. 使用datareader’读取Yahoo财经数据
  15. Marvell 88e6131路由器芯片学习笔记
  16. 程序员的算法趣题Q13: 满足字母算式的解法
  17. 计算机进位制转化ppt,各种进位制之间的相互转换.PPT
  18. me511完美刷GMS，可以使用android market,同步gmail联系人，使用google导航
  19. 软考架构师（第十二章 系统可靠性分析与设计 -- 案例题，论文）
  20. vc2015/2010整型转字符串-字符串转整型 vc++

热门文章

  1. 如何去掉WPS中.docx文档灰色的中括号？
  2. 分辨率和比例尺[转]
  3. 拿到任务后为什么要先分解
  4. 一个懒惰的人的自省书——请朋友们以我为戒，有更好的未来
  5. 一文看懂队列（FIFO）
  6. Fortain下载fortain
  7. Android程序安全系统和一键Root
  8. 用PyTorch玩转Transformer英译中翻译
  9. 1.2 CSS 基础
  10. 记录开发内容demo-java支付宝支付