h5-transform-3d
<!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的更多相关文章
- 一个H5的3D滑动组件实现(兼容2D模式)
起由 原始需求来源于一个项目的某个功能,要求实现3D图片轮播效果,而已有的组件大多是普通的2D图片轮播,于是重新造了一个轮子,实现了一个既支持2D,又支持3D的滑动.轮播组件. 实现思路 刚一开始肯定 ...
- H5打造3d场景不完全攻略(一): H5 3d表现形式
前言 日前,taobao造物节H5放肆地火了一把.相信接下来将3d嵌入网站的这种营销方式会被越来越多的人留意到.工作之余体验了若干个3d H5页面,感觉这类的H5互动体验性明显要比普通的要强,把二维的 ...
- CSS 3 学习——transform 3D转换渲染
以下内容根据官方规范翻译,没有翻译关于SVG变换的内容和关于矩阵计算的内容. 一般情况下,元素在一个无景深无立体感的平面(flat plane)上渲染,这个平面就是其包含块所处的平面.同时,页面上的其 ...
- 深入理解CSS变形transform(3d)
× 目录 [1]坐标轴 [2]透视 [3]变形函数 [4]透视函数 [5]变形原点 [6]背景可见 [7]变形风格 前面的话 本文将详细介绍关于transform变形3D的内容,但需以了解transf ...
- 深入理解 CSS变形 transform(3d)
坐标轴 在了解透视之前,首先要先了解坐标轴.3D变形与2D变形最大的不同就在于其参考的坐标轴不同.2D变形的坐标轴是平面的,只存在x轴和y轴,而3D变形的坐标轴则是x.y.z三条轴组成的立体空间,x轴 ...
- 利用CSS3的transform 3D制作的立方体旋转效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- transform—3D立方体
1.思路分析 第一步:首先需要一个大盒子,承载立方体的六个面: 第二步:立方体的六个面需要3D转化在特定的位置,拼接成一个立方体: 第三步:设置动画: 2.代码实现 第一步:创建div并且设置样式: ...
- 基于 H5和 3D WebVR 的可视化虚拟现实培训系统
前言 2019 年 VR, AR, XR, 5G, 工业互联网等名词频繁出现在我们的视野中,信息的分享与虚实的结合已经成为大势所趋,5G 是新一代信息通信技术升级的重要方向,工业互联网是制造业转型升级 ...
- 打造H5里的“3D全景漫游”秘籍
近来风生水起的VR虚拟现实技术,抽空想起年初完成的“星球计划”项目,总结篇文章与各位分享一下制作基于Html5的3D全景漫游秘籍. QQ物联与深圳市天文台合作,在手Q“发现新设备”-“公共设备”里,连 ...
- 好吧,CSS3 3D transform变换,不过如此!
一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...
随机推荐
- numpy中的CSV文件
As we all know,we use numpy to do some data explore.CSV has a good point to get a lot data. so how c ...
- 修正png
这是修正+取MD5的方法 function MD5FileTextPng(filename: AnsiString): AnsiString; var buf: ..MAX_PATH - ] of C ...
- 八数码问题 双向BFS/Hsh链表存储
转自洛谷 作者EndSaH #include<iostream> #include<string> #include<cmath> #include<cstr ...
- c# 外挂操作(内存操作)(内存读写取窗口句柄移动窗口取模块地址)工具类
来源于网上 参考 https://www.cnblogs.com/fuhua/p/5877781.html 等众多文章 详情取看我第二个例子封装功能较多 https://www.cnblogs.co ...
- ROM与RAM
今天小姐姐来问我关于ROM.RAM和Flash的区别,我给她大致的说了一下名称和作用.可人家说她知道这玩意的名字,希望我能够接地气的解释一下什么是ROM.RAM.FLASH…… 这就把我难住了 ≧ ﹏ ...
- flask部署:Ubuntu下使用nginx+uwsgi+supervisor部署flask应用
之前一直用的Centos或者Red hat,自从使用Ubuntu后,发现Ubuntu使用起来更方便,自此爱上Ubuntu. 一.从github上下载flask应用 1.我已经成功将自己编写好的应用上传 ...
- python 定义一个空集合、空字典
s = set() #定义一个空集合 s = {} #定义一个空字典
- Django 初体验
Django 依赖的python 基础环境安装: https://www.runoob.com/django/django-install.html Django安装参考官网文档: https://d ...
- 第二周的java
- POJ 1573:Robot Motion
Robot Motion Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 11324 Accepted: 5512 Des ...