角度旋转

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. 【BZOJ4199&UOJ131】品酒大会（后缀数组，并查集）

    题意: 两杯“r相似” (r>1)的酒同时也是“1 相似”.“2 相似”.…….“(r−1) 相似”的. n<=300000 abs(a[i])<=10^9 思路:对于i,j两个后缀 ...

  2. nyoj_528_找球号（三）_201404152050

    找球号(三) 时间限制:2000 ms  |  内存限制:3000 KB 难度:2   描述 xiaod现在正在某个球场负责网球的管理工作.为了方便管理,他把每个球都编了号,且每个编号的球的总个数都是 ...

  3. 最小生成树 D - Constructing Roads

    There are N villages, which are numbered from 1 to N, and you should build some roads such that ever ...

  4. 关于Git的简单使用

    新电脑git push一直出问题,到现在也没有解决,但是一些git的命令还是有用的,就先记下来吧.(下图就是没解决的报错) 一.上传本地项目到git 1.初始化git git init 2.配置用户名 ...

  5. Ubuntu 16.04清楚Dash历史记录

    1.[系统设置]->[安全和隐私]->[文件和应用]->[清除使用数据] 2.清楚播放记录 rm -v ~/.local/share/recently-used.xbel 3.清楚打 ...

  6. Ubuntu 16.04添加启动图标到Dash Home中

    一.添加图标: 图标信息在以下两处地方: /usr/share/applications ~/.local/share/applications(用户独立配置存放地方,是个隐藏文件夹) 图标信息文件以 ...

  7. Filters.h各种信号恢复滤波器头文件

    这篇文章有部分原理:http://blog.csdn.net/u013467442/article/details/41125473 代码下载地址:http://read.pudn.com/downl ...

  8. 配置远程连接mysql数据库 Connect to remote mysql database

    设有本地机器(local machine), ip地址为localip 远程机器(remote machine), ip地址remoteip 要通过在local machine的终端连接remote ...

  9. Codeforces Beta Round #67 (Div. 2)C. Modified GCD

    C. Modified GCD time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...

  10. 要自己当技术使用astgo运营网络电话系统，必须掌握的基本技术

    知道什么是centos 知道怎么远程访问centos服务器 (常用工具 Secure Shell Client.WINSCP) 知道重启服务器的命令是 reboot 知道你的服务器是没有图形界面的,所 ...