角度旋转

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转换的更多相关文章

  1. 前端笔记之HTML5&CSS3(下)2D/3D转换&animate动画

    一.2D转换(transform) CSS3中的transform转换和PS中的变换是一样的,分别有:缩放.位移.斜切.旋转 1.1 transform:scale()缩放 transform:sca ...

  2. CSS 3 学习——transform 3D转换渲染

    以下内容根据官方规范翻译,没有翻译关于SVG变换的内容和关于矩阵计算的内容. 一般情况下,元素在一个无景深无立体感的平面(flat plane)上渲染,这个平面就是其包含块所处的平面.同时,页面上的其 ...

  3. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  4. 3d转换-正方体-Html5Css3-遁地龙卷风

    (-1) 写在前面 我用的是chrome49,这个案例是从网上看到的,向这位同行致敬,建议大家在记录自己学习感悟时,向我一样加上笔名,被转载的时候还能留下点东西. 在研究slice-box.js的时候 ...

  5. CSS 3 3D转换

    绘制3D环境 父元素设置了 preserve-3d  子元素就可以以父元素作为平面进行3d转换 transform-style: preserve-3d; 设置视点 :表示透视效果  值越小 透视效果 ...

  6. 8个经典HTML5 3D动画赏析

    HTML5技术已经越来越被我们所接受,特别是一些3D的动画特效.本文介绍的8个HTML5 3D动画并没有特别华丽的界面,但是比较实用,涉及到3D图片.3D图表.3D按钮等方面,一起来看看. 1.HTM ...

  7. css3学习总结8--CSS3 3D转换

    3D 转换 1. rotateX() 2. rotateY() otateX() 方法 通过 rotateX() 方法,元素围绕其 X 轴以给定的度数进行旋转. 示例: div { transform ...

  8. CSS笔记(十二)CSS3之2D和3D转换

    参考:http://www.w3school.com.cn/css3/css3_2dtransform.asp 2D Transform 方法 函数 描述 matrix(n,n,n,n,n,n) 定义 ...

  9. HTML5 3D动画效果

    对以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,第一是浏览器不够先进,第二是大部分只能用flash实现伪3D.HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要再使用像IE67 ...

随机推荐

  1. 【BZOJ2434】阿狸的打字机(fail树,DFS序)

    题意: 1<=N<=10^5 1<=M<=10^5 输入总长<=10^5   思路: From http://blog.csdn.net/lych_cys/article ...

  2. 使用java操作hbase(单节点)

    1.在运行java代码之前,一定要先启动Hbase,很重要!!    cd /home/cx/itcast/hbase-1.2.6/bin   ./start-hbase.sh 2.新建一个java项 ...

  3. java 源码分析1 -String

    1. String的本质是一个 char数组,实现了CharSequence 接口, /** The value is used for character storage. */ private f ...

  4. [kuangbin带你飞]专题六 最小生成树 N - 畅通工程再续

    相信大家都听说一个“百岛湖”的地方吧,百岛湖的居民生活在不同的小岛中,当他们想去其他的小岛时都要通过划小船来实现.现在政府决定大力发展百岛湖,发展首先要解决的问题当然是交通问题,政府决定实现百岛湖的全 ...

  5. 将完整的Maven远程存储库下载到本地存储库(别试了,不太可取)

    别试了,这种方式不太可取. 要解决可以有如下思路: 1.做成镜像站点,有如下命令: wget -m http://site.to.mirror.com #-m代表“镜子”. rsync repo1.m ...

  6. SpringMVC断言--Assert

    Web 应用在接受表单提交的数据后都需要对其进行合法性检查,如果表单数据不合法,请求将被驳回.类似的,当我们在编写类的方法时,也常常需要对方法入参进行合 法性检查,如果入参不符合要求,方法将通过抛出异 ...

  7. docker run和nsenter

    docker run和nsenter 1,本机运行java -version没有内容, 使用 docker run java java -version就有内容了: 2, docker run -d ...

  8. android (13) Fragment使用下

    一.Fragment使用: 要在你的activity中管理Fragment,须要使用FragmentManager,能够通过getFragmentManager(),这里注意要是在v4包要用getSu ...

  9. 打造atom成为golang开发神器

    在我在Windows系统上开发的日子里.我使用IDE开发数年之久.比如Visual Basic IDE, Borland Delphi IDE, Visual C++ 和最后的Visual Studi ...

  10. C++对象模型——Template中的名称决议方式 (第七章)

    Template中的名称决议方式 (Name Resolution within a Template) 必须可以区分下面两种意义,一种是C++ Standard所谓的"sope of th ...