html元素做3d变换,CSS 3D变换
1、3D transform中有下面这三个方法:
rotateX( angle )
rotateY( angle )
rotateZ( angle )
意思是分别绕着X/Y/Z轴进行旋转。
学过一部分数学知识的人应该都能理解这里XYZ轴的意思。
可参见下图:
笛卡尔坐标系
2、perspective属性
perspective属性的存在与否决定了所看到的是2D的还是3D的。 没有透视,就不能称为3D。
3D透视
CSS3 3D transform中的透视的透视点与上面示例图是不同的:CSS3 3D transform的透视点是在浏览器的前方,近似就是眼睛所在方位。
例如,一个1360像素宽的显示器中有张图片,应用了3D transform,同时,该元素或该元素父辈元素设置的perspective大小为2000像素。则这张图片呈现的3D效果就跟你本人在1.47个显示器宽度的地方(1360*1.47≈2000)看到的真实效果一致。
3、translateZ()
translateZ()就相当于让图片向它正在面对的方向走过来(正值)或者远去(负值)。
所以,对于没有rotateX()和rotateY()的元素,translateZ()就相当于让它向屏幕前的你走过来或离你远去。
用这种情况举例。
(1)如果,设置父元素的perspective为1000px,当你设置子元素的translateZ()的值大于或等于1000px时,元素将会从屏幕上消失!这不难理解,相当于元素走到了你眼睛的后面,而显然,眼睛看不到自己后面的东西。
(2)translateZ()的值越小,元素越小,符合我们认知中远大近小的场景。
当父元素没有设置overflow:hidden的时候,translateZ()的值十分接近perspective的值也就是1000px时,元素将充斥整个屏幕,相当于把元素拿到了你眼前。
4、perspective-origin
perspective-origin设置了你看元素的角度。默认是50% 50%;
第一个参数表示了从左向右的偏向程度,50%表示视线落在中间,不偏左也不偏右,30%则表示从左向右数30%的地方看。
第二个参数表示了从上到下的偏向程度,类同第一个参数。
perspective-origin=50% 30%
perspective-origin=50% 50%
perspective-origin=20% 50%
5、transform-style: preserve-3d
transform-style有两个可能的值:flat(默认值,平面的)和preserved-3d
(3D透视)这个属性是定义你是用什么方式看到元素,一般想要呈现3D效果就要把这个设置为preserved-3d。
一般而言,该声明应用在3D变换的元素们的父元素上,也就是舞台元素。
6、backface-visibility
在CSS3 3D中,默认情况下我们可以看到背后的元素。但是为了贴合实际,我们常常设置为backface-visibility:hidden,使背后元素不可见。
7、一个小例子(借鉴于张鑫旭的博客)
效果:
效果图
点击图片区域可以实现照片按顺时针旋转。
可以将例子复制到自己的网页中试一下!
代码:
transform 3D test
body{
margin: 0;
padding: 0;
}
.main{
width: 100%;
height: 100%;
background-color: #ccc;
text-align: center;
position: absolute;
}
.stage{
width: 900px;
min-height: 100px;
margin-left: auto;
margin-right: auto;
padding: 100px 50px;
background-color: #f0f0f0;
box-shadow: inset 0 0 3px rgba(0,0,0,.35);
-webkit-perspective: 800px;
-moz-perspective: 800px;
perspective: 800px;
-webkit-transition: top .5s;
position: relative;
top: 50%;
perspective-origin: 50% 30%;
transform: translate(0,-50%);
}
.pic{
width: 128px;
height: 80px;
box-shadow: 0 1px 3px rgba(0,0,0,.5);
-webkit-transition: opacity 1s, -webkit-transform 1s;
-moz-transition: opacity 1s, -moz-transform 1s;
transition: opacity 1s, transform 1s;
position: absolute;
bottom: 0;
}
.pic:nth-child(1) { transform: rotateY( 0deg ) translateZ(200px);}
.pic:nth-child(2) { transform: rotateY( 40deg ) translateZ(200px);}
.pic:nth-child(3) { transform: rotateY( 80deg ) translateZ(200px);}
.pic:nth-child(4) { transform: rotateY( 120deg ) translateZ(200px);}
.pic:nth-child(5) { transform: rotateY( 160deg ) translateZ(200px);}
.pic:nth-child(6) { transform: rotateY( 200deg ) translateZ(200px);}
.pic:nth-child(7) { transform: rotateY( 240deg ) translateZ(200px);}
.pic:nth-child(8) { transform: rotateY( 280deg ) translateZ(200px);}
.pic:nth-child(9) { transform: rotateY( 320deg ) translateZ(200px);}
.container{
width: 128px;
height: 100px;
margin-left: -64px;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
position: absolute;
left: 50%;
}
.orange{
background-color: orange;
}
.red{
background-color: red;
}
.green{
background-color: green;
}
.white{
background-color: white;
}
.black{
background-color: black;
}
.blue{
background-color: blue;
}
var x=1;
$(".container").on('click',function(){
var y=40*x;
var container=$(".container");
container.css("transform","rotateY("+(-1*y)+"deg)");
x++;
});
第一次接触CSS 3D,觉得蛮好玩的,记得之前看到过一个应用rotate做了一个很好看的旋转菜单,决定下次要试一下!
html元素做3d变换,CSS 3D变换相关推荐
- css3 3d perspective,CSS 3D transforms系列教程-Perspective
CSS 3D transforms的出现已经有好几年的历史了,但是由于缺乏浏览器的广泛支持,它一直没有得到广泛的应用.这个系列教程旨在让更多的童鞋了解和使用CSS 3D transforms. 要将一 ...
- CSS 3D变换 transform3D
3D变换 transform3D 浏览器中我们除了可以实现 x y两轴的2D变换 也可以开启3D效果 3D效果经常用于一些复杂的绚丽效果展示 可以用来构建基础的3D模型空间 3D变形涉及的属性主要是t ...
- 手把手教你做一个CSS 3D云
为什么80%的码农都做不了架构师?>>> 介绍:之前在runjs分享了个3d云,今天在这分享个制作过程.这是个简化版,为了减轻浏览器打开时的压力去掉了云流动效果和鼠标滚轴效果. ...
- 单目初始化 单应矩阵 本质矩阵 恢复R t 三角变换求 3D点
单目初始化 单应矩阵 本质矩阵 恢复R t 三角变换求 3D点 博文末尾支持二维码赞赏哦 ^_^ /* * This file is part of ORB-SLAM2 * * 单目相机初始化 * 用 ...
- 2D平面上的变换和3D空间中的变换以及求无穷远点
求两个平行线的无穷远点,最简单的方法(二维空间和三维空间都适用) 两个平行线的交点就是无穷远点.求解的方法就是把直线的方向向量(向量我们都用列向量表示)拿到,然后给最后一维加个0就是它们的交点(无穷远 ...
- DirectX 11---从空间变换来看3D场景如何转化到2D屏幕
DirectX 11---从空间变换来看3D场景如何转化到2D屏幕 在看<Introduction to 3D Game Programming with DirectX 11>的时候,发 ...
- 3D环动画css3实现,CSS3 3D酷炫立方体变换动画的实现
我爱撸码,撸码使我感到快乐! 大家好,我是Counter,本章微博主要利用了CSS3的一些新特性, 主要用到关键帧来使3D图形运动起来,涉及到了一些抽象的思想,立体的想象. 先给大家看看完成的效果,代 ...
- 【CSS】770- 多层嵌套的CSS 3D动画技术详解
CSS动画是当前一种非常火爆的技术,我说的并不是一些简单的颜色变换或长短属性变换,我说的是3D变换技术:纯CSS实现的翻滚旋转立方体就是最典型的例子.网上能找到很多关于CSS动画的代码,但对于一个程序 ...
- 多层嵌套的CSS 3D动画技术详解
CSS动画是当前一种非常火爆的技术,我说的并不是一些简单的颜色变换或长短属性变换,我说的是3D变换技术:纯CSS实现的翻滚旋转立方体就是最典型的例子.网上能找到很多关于CSS动画的代码,但对于一个程序 ...
最新文章
- 【分享】(性能优化)思考数据列表中“特殊的列”
- LeetCode 17电话号码的字母组合(搜索)18四数之和
- TensorFlow 使用例子-LSTM实现序列标注
- python第一章笔记_head first python(第一章)–学习笔记
- 台积电9月14日起不向华为供货;315曝光50多款App涉嫌内置SDK窃取隐私;Micronaut 1.3.7发布 | 极客头条...
- 满满的干货!mysql技术介绍
- 联系人排序java代码_Android仿微信联系人按字母排序
- mug网络用语_各种游戏术语
- Smack Extensions用户手册
- 再见!LayUI !
- 如何解决chm类型的文件在Windows操作系统中无法打开
- 最大流(Dinic算法)
- SharePoint Online 触发的Automate工作流的调试
- DedeCMS顽固木马后门专杀工具V2.0实现方式研究
- java拼音汉字转换
- python在输出中间加空行_python输出空行
- 审视AI界的“SOTA成瘾”丨AI学者万字论述
- 高通Camx offline Log merge命令
- 一级建造师考试报名需要的材料,点击收藏!
- Python实用工具之制作证件照(有界面、附源码、赞关藏)
热门文章
- Github 2020年度报告:你以为新冠击溃了开发者?不!他们创造了更多代码...
- Upwork 发布最赚钱的编程语言 Top 15
- e.printStackTrace()会导致锁死?这仅仅是打印,怎么可能?
- php读取excel文件_php读取EXCEL文件 php excelreader读取excel文件
- linux创建隐藏进程6,在Linux 2.6内核下实现进程隐藏
- php上传报文,PHP-02.文件上传、php保存/转移上传的文件、常见的网络传输协议、请求报文及属性、响应报文及属性...
- selenium 获取href find_element_by_xpath
- cannot import name '_C'
- opencv dnn face
- JS 事件冒泡和事件捕获