角度旋转

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. 数据库删除数据表重复数据，只留下ID较小的行

    删除表中重复数据,留下ID比较小的行 delete from 表 where [重复字段] in (select [重复字段] from 表 group by 字段 having count([字段] ...

  2. 网卡MAC地址异常会导致无接受数据包，表现为只有发送没有接收

    遇到一个诡异的问题,一块4口博通千兆网卡中两个正常,两个怎么都没有接受,但是博通的程序网卡自检没有任何问题,最后发现是MAC地址的原因.需要将地址改为正常MAC方可正常通讯. 感觉应该是交换机丢弃了M ...

  3. TDSTCPServerTransport 的Filters

    TDSTCPServerTransport 的Filters TDSTCPServerTransport 的 Filter 属性,可以对传递的数据进行加密,压缩,再修改等,有 点注入的概念.默认情况下 ...

  4. [Vue @Component] Pass Props to Vue Functional Templates

    Functional templates allow you to create components consisting of only the template tag and exposing ...

  5. 黑马程序猿——JAVA基础——IO流

    ----------android培训.java培训.java学习型技术博客.期待与您交流!------------  一. 一.IO流的三种分类方式 1.按流的方向分为:输入流和输出流 2.按流的数 ...

  6. 【转】Linux 查看CPU信息、机器型号等硬件信息

    测试机器的硬件信息: 查看CPU信息(型号) # cat /proc/cpuinfo | grep name | cut -f2 -d: | uniq -c       8  Intel(R) Xeo ...

  7. 深入struts2(二) ---stuts2长处和主要包、类功能

    1.1     Struts2 上节已讲.struts2在webwork基础发展起来的mvc框架.MVC框架相信一般码农都比較了解,这里不再重说. 在这里只对于一下struts1,struts2做了哪 ...

  8. 浏览器的多线程和js的单线程--前端易混淆知识科普(一)

    问题:js是单线程的,页面是从上往下加载的,那么是不是第一个js没加载完成,第二个js就不加载?然后,引申出来一个问题就是,那css和图片呢?这之间的加载有相互影响吗? 1.什么是线程?什么是进程?什 ...

  9. PCB 挺有意思的基数排序----C#代码实现

    今天在头条看一个很有意思的排序算法[基数排序],以前所学习的排序算法都是基于数值对比的方式排序的,而这个算法挺有意思的非常独特.但从网上看到的例子通常是对个位,十位处理,并转为对应的桶索引的方式实现, ...

  10. js产生随机数教程

    <script>   function GetRandomNum(Min,Max){   var Range = Max - Min;   var Rand = Math.random() ...