<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         *{

             margin: 0;

             padding: 0;

         }

         div{

             width: 100px;

             height: 100px;

             background-color: #ff510a;

             margin-left: 200px;

             margin-top: 10px;

             transition: transform 2s;

         }

         /*添加三维运动---3d移动*/

         div:first-of-type:active{

             /*translate3d(x轴偏移,y轴偏移,z轴偏移)*/

             transform: translate3d(200px,200px,200px);

         }

         /*添加三维缩放*/

         div:nth-of-type(2):active{

             /*scale3d(x方向上的缩放，y方向的缩放，z方向的缩放

             >1 放大   <1 缩小)*/

             transform: scale3d(2,2,2);

         }

         /*添加三维旋转*/

         div:nth-of-type(3):active{

             /*rotate3d(x,y,z,angle)*/

             transform: rotate3d(1,1,0,300deg);

         }

     </style>

 </head>

 <body>

 <div>1</div>

 <div>2</div>

 <div>3</div>

 </body>

 </html>

h5-transform-3d的更多相关文章

  1. 一个H5的3D滑动组件实现(兼容2D模式)

    起由 原始需求来源于一个项目的某个功能,要求实现3D图片轮播效果,而已有的组件大多是普通的2D图片轮播,于是重新造了一个轮子,实现了一个既支持2D,又支持3D的滑动.轮播组件. 实现思路 刚一开始肯定 ...

  2. H5打造3d场景不完全攻略（一）: H5 3d表现形式

    前言 日前,taobao造物节H5放肆地火了一把.相信接下来将3d嵌入网站的这种营销方式会被越来越多的人留意到.工作之余体验了若干个3d H5页面,感觉这类的H5互动体验性明显要比普通的要强,把二维的 ...

  3. CSS 3 学习——transform 3D转换渲染

    以下内容根据官方规范翻译,没有翻译关于SVG变换的内容和关于矩阵计算的内容. 一般情况下,元素在一个无景深无立体感的平面(flat plane)上渲染,这个平面就是其包含块所处的平面.同时,页面上的其 ...

  4. 深入理解CSS变形transform(3d)

    × 目录 [1]坐标轴 [2]透视 [3]变形函数 [4]透视函数 [5]变形原点 [6]背景可见 [7]变形风格 前面的话 本文将详细介绍关于transform变形3D的内容,但需以了解transf ...

  5. 深入理解 CSS变形 transform(3d)

    坐标轴 在了解透视之前,首先要先了解坐标轴.3D变形与2D变形最大的不同就在于其参考的坐标轴不同.2D变形的坐标轴是平面的,只存在x轴和y轴,而3D变形的坐标轴则是x.y.z三条轴组成的立体空间,x轴 ...

  6. 利用CSS3的transform 3D制作的立方体旋转效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. transform—3D立方体

    1.思路分析 第一步:首先需要一个大盒子,承载立方体的六个面: 第二步:立方体的六个面需要3D转化在特定的位置,拼接成一个立方体: 第三步:设置动画: 2.代码实现 第一步:创建div并且设置样式: ...

  8. 基于 H5和 3D WebVR 的可视化虚拟现实培训系统

    前言 2019 年 VR, AR, XR, 5G, 工业互联网等名词频繁出现在我们的视野中,信息的分享与虚实的结合已经成为大势所趋,5G 是新一代信息通信技术升级的重要方向,工业互联网是制造业转型升级 ...

  9. 打造H5里的“3D全景漫游”秘籍

    近来风生水起的VR虚拟现实技术,抽空想起年初完成的“星球计划”项目,总结篇文章与各位分享一下制作基于Html5的3D全景漫游秘籍. QQ物联与深圳市天文台合作,在手Q“发现新设备”-“公共设备”里,连 ...

  10. 好吧，CSS3 3D transform变换，不过如此！

    一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...

随机推荐

  1. Redis——进阶

    redis的持久化 redis提供两种备份方式,一种是RDB 一种是AOFRDB默认开启.关闭注释掉所有的save,存储的是redis 具体的值,会压缩存储.AOF配置文件中appendonly ye ...

  2. Java Math.round()函数小结

      Math类中提供了三个与取整有关的方法:ceil,floor,round,这些方法的作用于它们的英文名称的含义相对应,例如:ceil的英文意义是天花板,该方法就表示向上取整,Math.ceil(1 ...

  3. VMWare 禁用vmem虚拟内存文件

    使用 VMWare 虚拟机,虚拟机启动后,会在虚拟机目录下建立一个与虚拟内存大小相同的 .vmem文件 这个文件主要是将虚拟机内存的内容映射到磁盘,以支持在虚拟机的暂停等功能 对所有的虚拟机" ...

  4. STL——翻转字符串

    #include<bits/stdc++.h> using namespace std; int main() { string a = "abc"; string a ...

  5. 提升Windows系统舒适度软件

    1.Geek Uninstaller 卸载软件 2.PotPlayer 无广告播放器

  6. 自制spring中bean加载机制，仅做笔记自用

  7. HDU - 1087 Super Jumping! Jumping! Jumping!（dp）

    题意:从起点依次跳跃带有数字的点直到终点,要求跳跃点上的数字严格递增,问跳跃点的最大数字和. 分析: 1.若之前的点比该点数字小,则可进行状态转移,dp[i] = max(dp[i], dp[j] + ...

  8. 51nod：天堂里的游戏

    天堂里的游戏 李陶冶 (命题人) System Message (测试) 基准时间限制:1 秒 空间限制:131072 KB 分值: 10 多年后,每当Noder看到吉普赛人,就会想起那个遥远的下午. ...

  9. Si7006主要面向传统上使用的分立RH / T传感器的低精度的应用

    Silicon Labs的Si7006 / 13/20/21个I 2 C相对湿度及温度传感器结合充分工厂校准湿度和温度传感器元件与模拟-数字转换器,信号处理和一个I 2 C主机接口.专利使用业界标准低 ...

  10. python面试题整理（一）

    python基础:1.列表生成式和生成器表达式有什么区别 我说的是首先写法不一样,列表生成式用[],生成器表达式用(),其次列表生成是一次性生成一个完整的列表,生成器表达式返回的是一个一个的值,占用内 ...