角度旋转

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. 19、Java并发性和多线程-嵌套管程锁死

    以下内容转自http://ifeve.com/nested-monitor-lockout/: 嵌套管程锁死类似于死锁, 下面是一个嵌套管程锁死的场景: 线程1获得A对象的锁. 线程1获得对象B的锁( ...

  2. 26、Java并发性和多线程-线程池

    以下内容转自http://ifeve.com/thread-pools/: 线程池(Thread Pool)对于限制应用程序中同一时刻运行的线程数很有用.因为每启动一个新线程都会有相应的性能开销,每个 ...

  3. Microsoft SQL Server Query Processor Internals and Architecture

    https://msdn.microsoft.com/en-us/library/aa226174(v=sql.70).aspx

  4. 不折移动web不腾－－开启我的个人Mac之旅

    背景,非常久非常久曾经(听过)Linux,瞎玩 Mac mini,而今Linux下开发技能半身不遂,处于放任状态.明明就知道随着时间流逝会越陌生的东西越不想去抓住最后的余温,不知道这算不算放弃,反正迟 ...

  5. JAVA 并发编程-线程池（七）

    线程池的作用: 线程池作用就是限制系统中运行线程的数量. 依据系统的环境情况.能够自己主动或手动设置线程数量,达到运行的最佳效果:少了浪费了系统资源,多了造成系统拥挤效率不高.用线程池控制线程数量,其 ...

  6. OC中APPDelegate[[UIApplication shareApplication]delegate]]Swift实现

    直接上代码: var myDelegate:AppDelegate? myDelegate = UIApplication.sharedApplication().delegate as? AppDe ...

  7. OpenCV2马拉松第17圈——边缘检測(Canny边缘检測)

    计算机视觉讨论群162501053 转载请注明:http://blog.csdn.net/abcd1992719g 收入囊中 利用OpenCV Canny函数进行边缘检測 掌握Canny算法基本理论 ...

  8. yum install -y dos2unix

    yum install -y dos2unix linux 怎么把^M去掉 - CSDN博客 http://blog.csdn.net/humanof/article/details/53044217 ...

  9. mysql创建用户，并授予权限

    mysql> GRANT ALL PRIVILEGES ON *.* TO jiqing@"%" IDENTIFIED BY '123456'; Query OK, 0 ro ...

  10. 【Poj2960】S-Nim & 博弈论

    Position: http://poj.org/problem?id=2960 List Poj2960 S-Nim List Description Knowledge Solution Noti ...