角度旋转

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. 1067 Bash游戏 V2

    有一堆石子共有N个.A B两个人轮流拿,A先拿.每次只能拿1,3,4颗,拿到最后1颗石子的人获胜.假设A B都非常聪明,拿石子的过程中不会出现失误.给出N,问最后谁能赢得比赛. 例如N = 2.A只能 ...

  2. internalsviewer

    https://intview2.codeplex.com/ https://internalsviewer.codeplex.com/releases/view/21139

  3. 关于C语言指针的一些新认识（1）

    Technorati 标签: 指针,数组,汇编,C语言 前言 指针是C语言的精华,但我对它一直有种敬而远之的感觉,因为一个不小心就可能让你的程序陷入莫名其妙的麻烦之中.所以,在处理字符串时,我总是能用 ...

  4. Android学习之仿QQ側滑功能的实现

    如今项目越来越多的应用了滑动删除的功能,Android本来遵循的是长按删除,IOS定制的是滑动删除,不可否认滑动删除确实在客户体验上要好一点,所以看了非常多关于仿QQ滑动删除的样例,还是感觉代码家的A ...

  5. Android离线语音识别（PocketSphinx）

    近期做项目.用到离线语音识别.整了好久,查了好多方法.最终完毕.网上资料有点乱,并且大部分就是那几个人写的.一群人转!以下我总结一下.也为后来人行个方便. 关于环境配置我就不多说了.我就是依照这个教程 ...

  6. 20170623_oracle_SQL

    ============SQL分类 数据定义语言(DDL):CREATE ALERT DROP TRUNCATE 数据操纵语言(DML):INSERT UPDATE DELETE SELECT 事务控 ...

  7. c++中读写文件操作

    读写文件这个,不常用,每次用的时候都会百度一下,每次写法还都不一样,所有总是记混.今天利用点时间总结下之前工程中用过的.以后就安照这种方法写了. 搞acmicpc的时候喜欢用freopen(),这个是 ...

  8. iOS开发】之CocoaAsyncSocket使用

    本文介绍了CocoaAsyncSocket库中GCDAsyncSocket类的使用.粘包处理以及时间延迟测试. 一.CocoaAsyncSocket介绍 CocoaAsyncSocket中主要包含两个 ...

  9. 【BZOJ 2457】 双端队列

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2457 [算法] 贪心 [代码] #include<bits/stdc++.h& ...

  10. bzoj3771

    http://www.lydsy.com/JudgeOnline/problem.php?id=3771 生成函数... 其实就是多项式乘法...lrj书上有一个通俗的解释... 然后就是这个样子,我 ...