<!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. Java日志相关概述

    日志是代码调试.生产运维必备工具,基本所有软件都会有日志记录. 1.常用日志框架介绍 1.Logging jdk1.5自带日志工具类,位于java.util.logging; 2.Log4j 市场占有 ...

  2. 064、Java中递归调用

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  3. 049、Java中使用switch判断，不加入break时的操作

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  4. ubuntu---NVIDIA驱动 + CUDA 安装完可能会遇见的问题

    如果稍不注意:系统内核.GCC.下载的版本不对应.安装过程中选项选择不正确,在NVIDIA驱动 + CUDA 安装完后可能会遇见一些问题. 一.登陆不进桌面 可能的操作: (1)nivida驱动安装完 ...

  5. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-signal

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  6. Acwing198 反素数

    原题面:https://www.acwing.com/problem/content/200/ 题目大意:对于任何正整数x,其约数的个数记作g(x),例如g(1)=1.g(6)=4.如果某个正整数x满 ...

  7. 【剑指Offer】面试题32 - I. 从上到下打印二叉树

    题目 从上到下打印出二叉树的每个节点,同一层的节点按照从左到右的顺序打印. 例如: 给定二叉树: [3,9,20,null,null,15,7], 3 / \ 9 20 / \ 15 7 返回: [3 ...

  8. 指令——cd

    一个完整的指令的标准格式: Linux通用的格式——#指令主体(空格) [选项](空格) [操作对象] 一个指令可以包含多个选项,操作对象也可以是多个. 命令:#cd (change director ...

  9. 二十五、JavaScript之查找字符串中的字符串indexOf和lastIndexOf的用法

    一.代码如下 二.效果如下 <!DOCTYPE html> <html> <meta http-equiv="Content-Type" conten ...

  10. 142-PHP trait的定义和使用

    <?php trait info{ //定义trait static function getinfo(){ return '这是一个'.__CLASS__.'类.<br />'; ...