html5——3D转换
角度旋转
rotateX:默认以center绕x轴旋转
rotateY:默认以center绕y轴旋转
rotateZ:默认以cente绕z轴r旋转
//rotateX原点为center==》正值(顶部)远离屏幕,负值(顶部)接近屏幕
//rotateX原点为top==》正值(底部)接近屏幕,负值(底部)远离屏幕
//rotateX原点为bottom==》正值(顶部)远离屏幕,负值(顶部)接近屏幕
//rotateY原点为center==》正值(左侧)接近屏幕,负值(左侧)远离屏幕
//rotateY原点为left==》正值(右侧)远离屏幕,负值(右侧)接近屏幕
//rotateY原点为right==》正值(左侧)接近屏幕,负值(左侧)远离屏
距离位移
translateX:以x轴为基准移动,右为正值
translateY:以y轴为基准移动,上为正值
translateZ:以z轴为基准移动,靠近屏幕为正值
旋转中心
transform-origin:top//绕着y轴的顶部进行旋转
transform-origin: x-axis y-axis z-axis;//第三个参数可以不写
x-axis:left、center、right、length、%
y-axis:top、center、bottom、length、%
z-axis:length
透视
1、透视可以将一个2D平面,在转换的过程当中,呈现3D效果。
2、透视是加给父盒子的
3、透视的值表示是2D平面距离屏幕的距离
perspective: 100px;//只有父盒子有此属性
3D呈现
1、只有规定了3d呈现方式为3d才会有显示效果
2、preserve-3d属性是加给父盒子的
transform-style: flat;//所有子元素在 2D 平面呈现
transform-style: preserve-3d;//保留3D空间
背面可见
backface-visibility: hidden;//背部隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 300px;
height: 300px;
margin-top: 10px;
margin-left: 100px;
float: left;
border: 1px solid #ccc;
perspective: 100px;
} .box > div {
text-align: center;
width: 150px;
height: 150px;
margin: 30px auto;
background-color: blue;
transition: all 1s;
} .box:nth-child(1) div:hover {
transform: rotateX(360deg);
} .box:nth-child(2) div:hover {
transform: rotateY(360deg);
} .box:nth-child(3) div:hover {
transform: rotateZ(360deg);
} .box:nth-child(4) div:hover {
transform: translateX(300px);
} .box:nth-child(5) div:hover {
transform: translateY(300px);
} .box:nth-child(6) div:hover {
transform: translateZ(50px);
}
</style>
</head>
<body>
<div class="box">
<div>rotateX</div>
</div>
<div class="box">
<div>rotateY</div>
</div>
<div class="box">
<div>rotateZ</div>
</div>
<div class="box">
<div>translateX</div>
</div>
<div class="box">
<div>translateY</div>
</div>
<div class="box">
<div>translateZ</div>
</div>
</body>
</html>
html5——3D转换的更多相关文章
- 前端笔记之HTML5&CSS3(下)2D/3D转换&animate动画
一.2D转换(transform) CSS3中的transform转换和PS中的变换是一样的,分别有:缩放.位移.斜切.旋转 1.1 transform:scale()缩放 transform:sca ...
- CSS 3 学习——transform 3D转换渲染
以下内容根据官方规范翻译,没有翻译关于SVG变换的内容和关于矩阵计算的内容. 一般情况下,元素在一个无景深无立体感的平面(flat plane)上渲染,这个平面就是其包含块所处的平面.同时,页面上的其 ...
- CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)
CSS3边框: 1.CSS3圆角:border-radius 属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...
- 3d转换-正方体-Html5Css3-遁地龙卷风
(-1) 写在前面 我用的是chrome49,这个案例是从网上看到的,向这位同行致敬,建议大家在记录自己学习感悟时,向我一样加上笔名,被转载的时候还能留下点东西. 在研究slice-box.js的时候 ...
- CSS 3 3D转换
绘制3D环境 父元素设置了 preserve-3d 子元素就可以以父元素作为平面进行3d转换 transform-style: preserve-3d; 设置视点 :表示透视效果 值越小 透视效果 ...
- 8个经典HTML5 3D动画赏析
HTML5技术已经越来越被我们所接受,特别是一些3D的动画特效.本文介绍的8个HTML5 3D动画并没有特别华丽的界面,但是比较实用,涉及到3D图片.3D图表.3D按钮等方面,一起来看看. 1.HTM ...
- css3学习总结8--CSS3 3D转换
3D 转换 1. rotateX() 2. rotateY() otateX() 方法 通过 rotateX() 方法,元素围绕其 X 轴以给定的度数进行旋转. 示例: div { transform ...
- CSS笔记(十二)CSS3之2D和3D转换
参考:http://www.w3school.com.cn/css3/css3_2dtransform.asp 2D Transform 方法 函数 描述 matrix(n,n,n,n,n,n) 定义 ...
- HTML5 3D动画效果
对以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,第一是浏览器不够先进,第二是大部分只能用flash实现伪3D.HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要再使用像IE67 ...
随机推荐
- 【BZOJ2434】阿狸的打字机(fail树,DFS序)
题意: 1<=N<=10^5 1<=M<=10^5 输入总长<=10^5 思路: From http://blog.csdn.net/lych_cys/article ...
- 使用java操作hbase(单节点)
1.在运行java代码之前,一定要先启动Hbase,很重要!! cd /home/cx/itcast/hbase-1.2.6/bin ./start-hbase.sh 2.新建一个java项 ...
- java 源码分析1 -String
1. String的本质是一个 char数组,实现了CharSequence 接口, /** The value is used for character storage. */ private f ...
- [kuangbin带你飞]专题六 最小生成树 N - 畅通工程再续
相信大家都听说一个“百岛湖”的地方吧,百岛湖的居民生活在不同的小岛中,当他们想去其他的小岛时都要通过划小船来实现.现在政府决定大力发展百岛湖,发展首先要解决的问题当然是交通问题,政府决定实现百岛湖的全 ...
- 将完整的Maven远程存储库下载到本地存储库(别试了,不太可取)
别试了,这种方式不太可取. 要解决可以有如下思路: 1.做成镜像站点,有如下命令: wget -m http://site.to.mirror.com #-m代表“镜子”. rsync repo1.m ...
- SpringMVC断言--Assert
Web 应用在接受表单提交的数据后都需要对其进行合法性检查,如果表单数据不合法,请求将被驳回.类似的,当我们在编写类的方法时,也常常需要对方法入参进行合 法性检查,如果入参不符合要求,方法将通过抛出异 ...
- docker run和nsenter
docker run和nsenter 1,本机运行java -version没有内容, 使用 docker run java java -version就有内容了: 2, docker run -d ...
- android (13) Fragment使用下
一.Fragment使用: 要在你的activity中管理Fragment,须要使用FragmentManager,能够通过getFragmentManager(),这里注意要是在v4包要用getSu ...
- 打造atom成为golang开发神器
在我在Windows系统上开发的日子里.我使用IDE开发数年之久.比如Visual Basic IDE, Borland Delphi IDE, Visual C++ 和最后的Visual Studi ...
- C++对象模型——Template中的名称决议方式 (第七章)
Template中的名称决议方式 (Name Resolution within a Template) 必须可以区分下面两种意义,一种是C++ Standard所谓的"sope of th ...