角度旋转

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. python——re模块（正则表达式）

    re 模块的使用: 1.使用compile()函数编译一个parttern对象, 例如:parttern=re.compile(r'\d+') 2.通过pattern对象提供的一系列属相和方法,对文本 ...

  2. one troubleshooting case about em access issue

    Today when trying to open my Oracle EM url, I can not open it. So I thought may be the network is ha ...

  3. Jenkins+Github持续集成

    由于最近团队代码库从coding迁移到github,在CI工具的选型上尝试了travis-ci和circle-ci,最后决定自己搭建CI服务器,而我也有幸认领了这个任务的调研,因此有了这篇文章. 之前 ...

  4. 从理论到实践，全方位认识DNS（理论篇）

    对于 DNS(Domain Name System) 大家肯定不陌生,不就是用来将一个网站的域名转换为对应的IP吗.当我们发现可以上QQ但不能浏览网页时,我们会想到可能是域名服务器挂掉了:当我们用别人 ...

  5. centos 如何安装软件

    yum命令 (一)yum基本概念 1)yum是什么 yum = Yellow dog Updater, Modified 主要功能是更方便的添加/删除/更新RPM包. 它能自动解决包的倚赖性问题. 它 ...

  6. MVC中从控制器到视图的数据传递方法汇总

    1.ViewData对象概述ViewData是一种字典集合数据,是"视图基类"和"控制器基类"的属性常见用法是在控制器中写入数据,在视图中读取数据ViewDat ...

  7. JWPlayer Uncaught Error: Invalid SRT file

    错误场景: JWPlayer 播放视频,加入了字幕和缩略图: 字幕为Srt格式: 1 00:00:00,000 --> 00:00:02,000 战略管理过程 2 00:00:03,000 -- ...

  8. coffeescript遍历json对象

    直接给代码: headers = a:"this is a" ,b:"this is b" ,c:"this is c" exheaders ...

  9. linux 设备树及节点引用【转】

    本文转载自:http://blog.csdn.net/KjfureOne/article/details/51972854 1.ARM Linux社区为什么要引入设备树 Linux之父Linus To ...

  10. LaTeX 在线编辑器（LaTeX online editors）

    eqneditor:有强大的几乎所有常用的数学符号对应的图标形式,便于快速完成latex公式编辑且易于粘贴拷贝. 此外,更为重要的一点是,随着编辑窗口内公式的编辑,会在页面的底部,自动生成其对应的 h ...