2D、3D形变
一、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形变的更多相关文章
- FushionCharts Free 的运用[2D/3D图表处理]
由于先前在一些论坛中谈论到这个插件的运用,留了一些QQ联系方式,最近老是被一些程序员“骚扰”,说是请教一些关于FushionChart Free图表的处理技术,先前还是比较乐意接受的,但发现后来一些完 ...
- CSS自学笔记（13）:CSS3 2D/3D转换
CSS3中新增了对元素进行2D和3D的转换效果,这样可以是开发人员很方便的做出视觉效果更好的网页来. 通过CSS3中属性的定义,我们可以对元素进行移动.缩放.拉伸.旋转等等,可以通过定义transfo ...
- 基于 HTML5 Canvas 的简易 2D 3D 编辑器
不管在任何领域,只要能让非程序员能通过拖拽来实现 2D 和 3D 的设计图就是很牛的,今天我们不需要 3dMaxs 等设计软件,直接用 HT 就能自己写出一个 2D 3D 编辑器,实现这个功能我觉得成 ...
- 分享数百个 HT 工业互联网 2D 3D 可视化应用案例
过去的 2018 年,我们认为是国内工业互联网可视化的元年,图扑软件作为在工业可视化领域的重度参与者,一线见证了众多 HTML5/Web 化.2D/3D 化的项目在工业界应用落地,我们觉得有必要在此分 ...
- 盒子显隐，伪类边框，盒子阴影,2d平面形变
-盒子显隐 显隐的盒子尽量不影响其他盒子的布局 display:none; 消失的时候不占位置,显示的时候占位 opacity:0-1; 盒子透明度 overflow: hidden; 超出部分隐藏 ...
- 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 ...
- DirectUI 2D/3D 界面库集合 分析之总结
DirectUI优点在于能够非常方便的构建高效,绚丽的,非常易于扩展的界面.作者是Bjarke Viksoe, 他的这个界面程序思想和代码都很优秀,他的代码主要表述了他的思想,尽管bug比較多,可是很 ...
- 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 ...
- 分享数百个 HT 工业互联网 2D 3D 可视化应用案例之 2019 篇
继<分享数百个 HT 工业互联网 2D 3D 可视化应用案例>2018 篇,图扑软件定义 2018 为国内工业互联网可视化的元年后,2019 年里我们与各行业客户进行了更深度合作,拓展了H ...
随机推荐
- Git命令总结
本文转载自345大神.... 查看原文 先上个图形化界面GIT工具 SourceTree下载链接 windows版 1.8.3 & Mac版 2.2.4 链接: http://pan.baid ...
- Mac OS、Ubuntu 安装及使用 Consul
Consul 概念(摘录): Consul 是 HashiCorp 公司推出的开源工具,用于实现分布式系统的服务发现与配置.与其他分布式服务注册与发现的方案,比如 Airbnb 的 SmartStac ...
- 使用SecureCRT连接虚拟机（ubuntu）配置记录
这种配置方法,可以非常方便的操作虚拟机里的Linux系统,且让VMware在后台运行,因为有时候我直接在虚拟机里操作会稍微卡顿,或者切换速度不理想,使用该方法亲测本机效果确实ok,特此记录. Secu ...
- 来自于微信小程序的一封简讯
9月21晚间,微信向部分公众号发出公众平台-微信应用号(小程序)的内测邀请,向来较为低调的微信在这一晚没人再忽视它了. 来自个人博客:Damonare的个人博客 一夜之间火了的微信应用号你真的知道吗? ...
- 后缀数组的倍增算法（Prefix Doubling）
后缀数组的倍增算法(Prefix Doubling) 文本内容除特殊注明外,均在知识共享署名-非商业性使用-相同方式共享 3.0协议下提供,附加条款亦可能应用. 最近在自学习BWT算法(Burrows ...
- Tableau未必最佳，国内BI也能突破重围！
如今,百度一下商业智能或BI工具,总能看到Tableau的身影.并不是Tableau的营销做得好,而是国内对于商业智能工具的认知和选择似乎都落在了Tableau身上.导致不管业内业外都对商业智能的概念 ...
- AngularJS 系列 学习笔记 目录篇
目录: AngularJS 系列 01 - HelloWorld和数据绑定 AngularJS 系列 02 - 模块 (持续更新)
- T-SQL 拆分使用指定分隔符的字符串(split string)
比如有一个表,我们需要些一个语句像SELECT OtherID, SplitData WHERE SomeID = 'abcdef-.......' , 然后就能返回分割成单独的行. 原表: | So ...
- join Linq
List<Publisher> Publishers = new List<Publisher>(); Publisher publish1 = new Publisher() ...
- ubuntu14 安装及卸载vmware
原帖http://blog.sina.com.cn/s/blog_73dac6b50101gp4f.html 适用于ubuntu14和vmware player 12.5