一、2D形变：

　形变的属性名:transform

类型:

1.平移(translate)

2.缩放(scale)

3.倾斜(skew)

4.旋转(rotate)

demo中需要的图：

houRes/bg-grid.jpg：

houRes/cardKingClub.png

 <body>

     <div class="box">

         <img src="houRes/cardKingClub.png"/>

         <img src="houRes/cardKingClub.png" />

     </div>

 </body>
 //基本的css：

             .box{

                 width: 400px;

                 height: 400px;

                 background: url(houRes/bg-grid.jpg) no-repeat red;

                 /*background-size:支持百分比,百分比是基于box的大小而言,第一个是水平方向

 7                  第二个是垂直方向*/

                 background-size: 100% 100%;

                 position: relative;

             }

             img{

                 width: 100px;

                 height: 150px;

                 /*宽度明确,借助绝对定位,left: 0;right: 0;margin:0 auto;实现左右居中*/

                 position: absolute;

                 left: 0;

                 right: 0;

                 top: 0;

                 bottom: 0;

                 margin: auto;

             }

             .box img:first-child{

                 opacity: 0.5;

             }
     .box img:last-child{

                 /*1.平移:translate

 3                      translateX:水平方向

 4                      translateY:垂直方向

 5                      值为px或是百分比,百分比就是基于设置样式的标签本身的大小,

 6                        x:width,y:height

 7                      合起来写:translate(X,Y)[用逗号隔开]

 8                 */

                 transform: translateX(20px) translateY(20px);

                 /*transform: translate(20px ,20px);*/

                 /*transform: translate(20px);*/

         }

效果图：

        .box img:last-child{

               /*2.缩放:

                     scaleX

                     scaleY

                     值为倍数,1=1倍

                     值为负数时,先翻转后缩放

                     合写:transform:scaleX(X,Y);

             */

            transform:  scaleX(0.6)  scaleY(-0.6);

            /*transform:scale(-0.5,0.5);*/

        {

效果图：

         .box img:last-child{

             /*倾斜skew

 3                  单位是deg

 4                  当倾斜为90deg会消失不见

 5                  skew(x,y);

 6              */

             transform:skewX(45deg) skewY(0deg);

          }

效果图：

 1    .box img:last-child{

 2              /*旋转rotate

 3                  单位:deg

 4                  默认点:中心的

 5                   正角度:顺时针旋转

 6                   负角度:逆时针旋转

 7               */

 8              /*transform:rotate(45deg)*/

 9              /*更改旋转的源点

10                       origin

11                  默认值:center center

12                   left top:左上角点

13                   left bottom

14                   right top

15                   left=left center

16                       */

17                 transform-origin:left top;

18                 transform:rotate(45deg)

19            }

效果图：

所有的属性都支持形变的:

transform:多组形变用空格

background:多组之间用","号

形变中平移其实真正的位置没有改变,移动就是个假象

 二、3D形变　

想要展示子元素的3d效果，必须要给子元素的父级添加：

transform-style:preserve-3d;属性和属性值,默认值为flat:平面展示(2d)　　

　　平移：translate3d(x,y,z)　　　　　　　　

　　缩放：scale3d(X,Y,Z)

　　旋转：transform :rotate3d(x,y,z,旋转度数);

* 当x,y,z的值为1时,就代表在该轴上进行旋转,度数为第四个参数

2D、3D形变的更多相关文章

  1. FushionCharts Free 的运用[2D/3D图表处理]

    由于先前在一些论坛中谈论到这个插件的运用,留了一些QQ联系方式,最近老是被一些程序员“骚扰”,说是请教一些关于FushionChart Free图表的处理技术,先前还是比较乐意接受的,但发现后来一些完 ...

  2. CSS自学笔记（13）:CSS3 2D/3D转换

    CSS3中新增了对元素进行2D和3D的转换效果,这样可以是开发人员很方便的做出视觉效果更好的网页来. 通过CSS3中属性的定义,我们可以对元素进行移动.缩放.拉伸.旋转等等,可以通过定义transfo ...

  3. 基于 HTML5 Canvas 的简易 2D 3D 编辑器

    不管在任何领域,只要能让非程序员能通过拖拽来实现 2D 和 3D 的设计图就是很牛的,今天我们不需要 3dMaxs 等设计软件,直接用 HT 就能自己写出一个 2D 3D 编辑器,实现这个功能我觉得成 ...

  4. 分享数百个 HT 工业互联网 2D 3D 可视化应用案例

    过去的 2018 年,我们认为是国内工业互联网可视化的元年,图扑软件作为在工业可视化领域的重度参与者,一线见证了众多 HTML5/Web 化.2D/3D 化的项目在工业界应用落地,我们觉得有必要在此分 ...

  5. 盒子显隐，伪类边框，盒子阴影,2d平面形变

    -盒子显隐 显隐的盒子尽量不影响其他盒子的布局 display:none; 消失的时候不占位置,显示的时候占位 opacity:0-1; 盒子透明度 overflow: hidden; 超出部分隐藏 ...

  6. Asphyre Sphinx is a cross-platform framework for developing 2D/3D video games and interactive business applications

    Introduction Introduction Asphyre Sphinx is a cross-platform framework for developing 2D/3D video ga ...

  7. DirectUI 2D/3D 界面库集合 分析之总结

    DirectUI优点在于能够非常方便的构建高效,绚丽的,非常易于扩展的界面.作者是Bjarke Viksoe, 他的这个界面程序思想和代码都很优秀,他的代码主要表述了他的思想,尽管bug比較多,可是很 ...

  8. paper 157：文章解读--How far are we from solving the 2D & 3D Face Alignment problem?-(and a dataset of 230,000 3D facial landmarks)

    文章:How far are we from solving the 2D & 3D Face Alignment problem?-(and a dataset of 230,000 3D ...

  9. 分享数百个 HT 工业互联网 2D 3D 可视化应用案例之 2019 篇

    继<分享数百个 HT 工业互联网 2D 3D 可视化应用案例>2018 篇,图扑软件定义 2018 为国内工业互联网可视化的元年后,2019 年里我们与各行业客户进行了更深度合作,拓展了H ...

随机推荐

  1. “不给力啊，老湿！”：RSA加密与破解

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 加密和解密是自古就有技术了.经常看到侦探电影的桥段,勇敢又机智的主角,拿着一长串毫 ...

  2. hibernate多对多关联映射

    关联是类(类的实例)之间的关系,表示有意义和值得关注的连接. 本系列将介绍Hibernate中主要的几种关联映射 Hibernate一对一主键单向关联Hibernate一对一主键双向关联Hiberna ...

  3. BIOS中未启用虚拟化支持系列~~例如：因此无法安装Hyper-V

    异常处理汇总-服务器系列:http://www.cnblogs.com/dunitian/p/4522983.html 一般都是启动一下CUP虚拟化就可以了 比如华硕的:

  4. 旺财速啃H5框架之Bootstrap（一）

    接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了.如果你想详细的学习Bootstra ...

  5. ASP.NET MVC5+EF6+EasyUI 后台管理系统（80）-自由桌面

    系列目录 前言 这次我们来做一个有趣的事情,有朋友跟做了很远,找我要自由桌面的代码,这次我们将演示自由桌面的代码. 自由桌面:用户可以随意增删改桌面的布局.个数(只留自己需要看到的数据),这次纯属Ea ...

  6. 用scikit-learn学习DBSCAN聚类

    在DBSCAN密度聚类算法中,我们对DBSCAN聚类算法的原理做了总结,本文就对如何用scikit-learn来学习DBSCAN聚类做一个总结,重点讲述参数的意义和需要调参的参数. 1. scikit ...

  7. SQL Server2016升级前几点自检

    SQL Server2016已经出来一段时间了,而且最新的SP1包也于2016年11月18日正式发布,各种新的特性推出让我们跃跃欲试.那么对于我们真实的业务环境,特别是生产环境要不要"跟风& ...

  8. Chrome V8引擎系列随笔 (1)：Math.Random()函数概览

    先让大家来看一幅图,这幅图是V8引擎4.7版本和4.9版本Math.Random()函数的值的分布图,我可以这么理解 .从下图中,也许你会认为这是个二维码?其实这幅图告诉我们一个道理,第二张图的点的分 ...

  9. [笔记]HAproxy reload config file with uninterrupt session

    HAProxy is a high performance load balancer. It is very light-weight, and free, making it a great op ...

  10. IT持续集成之质量管理

    研发工具生态 质量相关工作 一次编译产出测试包与上线包 !从源头保证版本的⼀一致性!代码质量控制! 全⽅方位的⾃自动化测试体系保证! 提测冒烟效率! 全⾃自动上线流程杜绝⼈人⼯工犯错! 生产环境应⽤用 ...