一、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. NodeJs在Linux下使用的各种问题

    环境:ubuntu16.04 ubuntu中安装NodeJs 通过apt-get命令安装后发现只能使用nodejs,而没有node命令 如果想避免这种情况请看下面连接的这种安装方式: 拓展见:Linu ...

  2. 在Ubuntu下搭建ASP.NET 5开发环境

    在Ubuntu下搭建ASP.NET 5开发环境 0x00 写在前面的废话 年底这段时间实在太忙了,各种事情都凑在这个时候,没时间去学习自己感兴趣的东西,所以博客也好就没写了.最近工作上有个小功能要做成 ...

  3. ASP.NET路由模型解析

    大家好,我又来吹牛逼了 ~-＿-~ 转载请注明出处:来自吹牛逼之<ASP.NET路由模型解析> 背景:很多人知道Asp.Net中路由怎么用的,却不知道路由模型内部的运行原理,今天我就给大家 ...

  4. ASP.NET MVC5+EF6+EasyUI 后台管理系统（67）-MVC与ECharts

    系列目录 ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...

  5. JQuery 选择器

    选择器是JQuery的根基,在JQuery中,对事件的处理,遍历DOM和AJAX操作都依赖于选择器.如果能够熟练地使用选择器,不仅能简化代码,而且还可以事半功倍. JQuery选择器的优势 1.简洁的 ...

  6. MySQL 系列（二） 你不知道的数据库操作

    第一篇:MySQL 系列(一) 生产标准线上环境安装配置案例及棘手问题解决 第二篇:MySQL 系列(二) 你不知道的数据库操作 本章内容: 查看\创建\使用\删除 数据库 用户管理及授权实战 局域网 ...

  7. HTML5 Page Visibility

    什么是 Page Visibility ? Page Visibility 即页面可见性,通过 visibilityState 的值检测页面当前是否可见.当一个网站是可见或点击选中的状态时 Page ...

  8. 品牌营销：不要Beat，要逼格！

             品牌营销:不要Beat,要逼格! 奥美的创始人大卫·奥格威说,广告营销应当是"具有风度的推销产品".而当下的营销手段,"风度"早已被抛之脑后, ...

  9. 第14章 Linux启动管理（1）_系统运行级别

    1. CentOS 6.x 启动管理 (1)系统运行级别 ①运行级别 运行级别 含义 0 关机 1 单用户模式,可以想象为Windows的安全模式,主要用于系统修复.(但不是Linux的安全模式) 2 ...

  10. Topshelf 支持Mono 扩展Topshelf.Linux

    使用Topshelf 5步创建Windows 服务 这篇文章大家可以了解到使用Topshelf可以很好的支持Windows服务的开发,但是它和Mono不兼容,Github上有一个扩展https://g ...