<!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错误览表

    Oracle 错误总结及问题解决 ORA     本文转自:https://www.cnblogs.com/zhangwei595806165/p/4972016.html  作者@承影剑 ORA-0 ...

  2. Windows系统查看端口被那些进程使用

    Windows系统查看端口被那些进程使用注:当前Windows为虚拟机环境1. 打开命令提示符:开始-运行-cmd2. 列出使用端口的PID: netstat -abno -a 显示所有连接和侦听端口 ...

  3. 链表题目汇总(python3)

    1.从头到尾打印链表 输入一个链表,按链表值从尾到头的顺序返回一个ArrayList. # -*- coding:utf-8 -*- class ListNode: def __init__(self ...

  4. MS SQLSERVER 自增ID列竟然会重复

    MS SQLSERVER 2008 R2 datacenter edition 自增的ID列,设为了主键. 从没遇到过的情况.

  5. 树莓派 Raspberry 软件源更改 看门狗启用

    看门狗无法在pi1上执行,似乎后更高级的pi上面才可用 1.替换脚本 下面脚本请直接复制到终端执行!! 适用于raspbian-stretch(基于Debian9) sudo -s echo -e & ...

  6. jmeter性能测试--浪涌测试

    1.         Ultimate Thread Group 右键测试计划-添加-Theads(Users)-Ultimate Thread Group,如下图1所示 图1 图2 参数说明,如下图 ...

  7. c++程序—选择结构

    if(判断条件){执行语句} #include<iostream> using namespace std; #include<string> int main() { ; c ...

  8. 死循环（endless loop）

    死循环 死循环就是一个无法结束的循环.(endless loop / infinite loop) 出现死循环是因为没有设置好结束条件,循环的结束条件很重要,要充分考虑各种边界情况. 以上一篇随笔中的 ...

  9. 八十一、SAP中的ALV的简介（ABAP List Viewer）

    一.ALV是SAP中的一个表格,全称为:ABAP List Viewer或者SAP List Viewer,就是可视化表格. ALV是SAP系统中心的列表标准,可以在ABAP程序中进行报表输出.除去列 ...

  10. 一、REACT概述

    1.前端/react概述 <从零react> 1.前端工 程概述 Web跨平台.跨浏览 器的应用开发场景 网页浏览器(Web Browser) 通过 CLI 指令去操作的 Headless ...