一、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之OS

    OS Node.js提供了一些基本的底层操作系统的模块OS. API var os = require('os'); console.log('[arch] 操作系统CPU架构'+os.arch()) ...

  2. 黑云压城城欲摧 - 2016年iOS公开可利用漏洞总结

    黑云压城城欲摧 - 2016年iOS公开可利用漏洞总结 作者:蒸米,耀刺,黑雪 @ Team OverSky 0x00 序 iOS的安全性远比大家的想象中脆弱,除了没有公开的漏洞以外,还有很多已经公开 ...

  3. 谈谈一些有趣的CSS题目（九）-- 巧妙的实现 CSS 斜线

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  4. AFNetworking 3.0 源码解读（七）之 AFAutoPurgingImageCache

    这篇我们就要介绍AFAutoPurgingImageCache这个类了.这个类给了我们临时管理图片内存的能力. 前言 假如说我们要写一个通用的网络框架,除了必备的请求数据的方法外,必须提供一个下载器来 ...

  5. “此网页上的某个 Web 部件或 Web 表单控件无法显示或导入。找不到该类型，或该类型未注册为安全类型。”

    自从vs装了Resharper,看见提示总是手贱的想去改掉它.于是乎手一抖,把一个 可视web部件的命名空间给改了. 喏,从LibrarySharePoint.WebPart.LibraryAddEd ...

  6. XAMARIN.ANDROID SIGNALR 实时消息接收发送示例

    SignalR 是一个开发实时 Web 应用的 .NET 类库,使用 SignalR 可以很容易的构建基于 ASP.NET 的实时 Web 应用.SignalR 支持多种服务器和客户端,可以 Host ...

  7. 第12章 Linux系统管理

    1. 进程管理 1.1 进程查看 (1)进程简介 进程是正在执行的一个程序或命令(如ls命令也是一个进程),每个进程都是一个运行的实体,都有自己的地址空间,并占用一定的系统资源. (2)进程管理的作用 ...

  8. Spring MVC注解开发入门

    注解式开发初步 常用的两个注解: @Controller:是SpringMVC中最常用的注解,它可以帮助定义当前类为一个Spring管理的bean,同时指定该类是一个控制器,可以用来接受请求.标识当前 ...

  9. angularJS（5）

    angularJS(5) 一,数据循环:特别要注意作用域 使用ng-repeat指令. <div ng-app="myApp" ng-controller="myC ...

  10. 杂项之python描述符协议

    杂项之python描述符协议 本节内容 由来 描述符协议概念 类的静态方法及类方法实现原理 类作为装饰器使用 1. 由来 闲来无事去看了看django中的内置分页方法,发现里面用到了类作为装饰器来使用 ...