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 ...
随机推荐
- ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章：利用模型类创建视图、控制器和数据库
在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...
- .NetCore中的日志（1）日志组件解析
.NetCore中的日志(1)日志组件解析 0x00 问题的产生 日志记录功能在开发中很常用,可以记录程序运行的细节,也可以记录用户的行为.在之前开发时我一般都是用自己写的小工具来记录日志,输出目标包 ...
- KMP算法求解
// KMP.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iostream> using namespac ...
- .NET平台开源项目速览(17)FluentConsole让你的控制台酷起来
从该系列的第一篇文章 .NET平台开源项目速览(1)SharpConfig配置文件读写组件 开始,不知不觉已经到第17篇了.每一次我们都是介绍一个小巧甚至微不足道的.NET平台的开源软件,或者学习,或 ...
- 再部署一个 instance 和 Local Network - 每天5分钟玩转 OpenStack（131）
上一节部署了 cirros-vm1 到 first_local_net,今天我们将再部署 cirros-vm2 到同一网络,并创建 second_local_net. 连接第二个 instance 到 ...
- WebApi接口 - 如何在应用中调用webapi接口
很高兴能再次和大家分享webapi接口的相关文章,本篇将要讲解的是如何在应用中调用webapi接口:对于大部分做内部管理系统及类似系统的朋友来说很少会去调用别人的接口,因此可能在这方面存在一些困惑,希 ...
- 以向VS 程序打包集成自动写入注册表功能为例，介绍如何实现自由控制安装过程
最近由于项目部署时需要更灵活的控制程序安装的流程以及自定义安装行为,特意研究了一下VS程序打包,把解决办法和大家分享一下. 以VS2010为例: 这是一个已经设置好最基本的Visual Studio ...
- BPM助力企业数字化转型
自九十年代末,流程管理开始引入国内,至今已经有20多年的历史了,由最初的部门级应用向企业级应用转变,大家的认知也经历了一系列的发展变化.不同阶段的信息化水平对企业的流程以及BPM平台也提出了不同的需求 ...
- Kotlin与Android SDK 集成（KAD 05）
作者:Antonio Leiva 时间:Dec 19, 2016 原文链接:https://antonioleiva.com/kotlin-integrations-android-sdk/ 使用Ko ...
- centos6和centos7防火墙的关闭
CentOS6.5查看防火墙的状态: [zh@localhost ~]$service iptable status 显示结果: [zh@localhost ~]$service iptable st ...