<!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. oracle 实现主键id自增

    公司现在项目数据库使用oracle,oracle实现表主键自增比mysql麻烦 mysql 在表主键auto_increment 打钩即可.oracle没有改属性,就相对麻烦.特此记录一下自增方法 测 ...

  2. jenkins#安装docker

    环境:centos7 安装依赖包 yum install -y yum-utils device-mapper-persistent-data lvm2 添加Docker软件包源 yum-config ...

  3. CSV用excel打开乱码

    utf-8 csv 文件用 excel 打开乱码问题 其实这个问题很久之前遇到过, 应该是没解决, 当时的情况是openoffice打开正常而excel打开不正常, 后来也没解决了, 只能把编码转了. ...

  4. HTML<figure> <figcaption> 标签定义图文并茂

    本来想分两篇文章来解释说明figure.figcaption的,但是这俩个标签都是定义图文的,所以我们合起来讲解,大家更能容易接受. 大家在写xhtml.html中常常用到一种图片列表,图片+标题 或 ...

  5. 吴裕雄--天生自然java开发常用类库学习笔记：SortedMap类

    import java.util.Map ; import java.util.SortedMap ; import java.util.TreeMap ; public class SortedMa ...

  6. UVA - 1626 Brackets sequence （区间dp）

    题意:给定一个串,可能空串,或由'[',']','(',')'组成.问使其平衡所需添加最少的字符数,并打印平衡后的串. 分析:dp[i][j]表示区间(i,j)最少需添加的字符数. 1.递推. #in ...

  7. POJ 2142：The Balance

    The Balance Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 4781   Accepted: 2092 Descr ...

  8. POJ 1655：Balancing Act

    Balancing Act Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10311   Accepted: 4261 De ...

  9. ffmpeg 多路实时问题之解决思路

     记得前面有人提出多路视频不实时问题,这个首先需要从网络带宽上查看是否视频帧全实时的到达,还有一个问题就是,即使视频帧全部到达,看起CPU也是足够的,但是却表现为慢镜头这种样子,那么很可能是解码显示的 ...

  10. excel提取数字

    部分提取,那么就用=-LOOKUP(,-MID(A1,MIN(FIND({0;1;2;3;4;5;6;7;8;9},A1&1234567890)),ROW($1:$1024))) ------ ...