css之3D变换
3D变换的x，y，z轴是分别效果是：
x轴旋转的话，就是头和脚进行转动
y轴旋转的话，就是左右手进行转动
z轴旋转的话，就是整个身体平铺在旋转。
上面是针对旋转的意思去，但是对于其他的类似一样，就是这样子去理解x，y，z轴的在哪里的
transform: rotateX(360deg);
transform: rotateY(360deg);
transform: rotateZ(360deg);
变换跟2D同理
最主要的区别是透视视图“景深”
<!--景深的作用：
1、让3D场景有近大远小的效果（就是肉眼距离屏幕的距离）
2、是一个不可以继承的。但他可以作用于后代元素（不是作用于本身的）
原理：
景深越大，灭点越远，元素变形更小
景深越小，灭点越近，元素变形更大
灭点：灭点就是你看到的尽头
景深基点：视角的位置
组合变换的话，放本身的话，一定要放在首位
如果要让景深有效果，又想放在本身的元素上，就需要进行组合处理。例如：
transform:perspective(100px) rotateX(360deg) ;
总体代码如图所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0; }
#wrap{
width: 400px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -200px;
border: 1px solid black;
/*perspective: 100px;*/ }
#inner{
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
border: 1px solid pink;
border-radius: 50%;
text-align: center;
line-height: 200px;
font-weight: bold;
transition: 2s;
}
#wrap:hover #inner{
/*transform: rotateX(360deg);
transform: rotateY(360deg);
transform: rotateZ(360deg);
transform: scaleX(2);
transform: scaleZ(2);*/
/*transform: translateZ(100px);*/
transform:perspective(100px) rotateX(360deg) ;
}
</style>
</head>
<body>
<div id="wrap">
<div id="inner">
Rainbow
</div>
</div>
</body>
</html>
-->
css之3D变换的更多相关文章
- 介绍css 的3D 变换（3D transform）
https://desandro.github.io/3dtransforms/docs/card-flip.html ---------------------------------------- ...
- CSS3之3D变换实例详解
CSS3的3D效果很赞,本文实现简单的两种3D翻转效果.首先看效果和源代码,文末是文绉绉的总结部分^_^ 以下CSS代码为了简洁没有添加前缀,请视情况自行添加(自动化时代推荐使用其他的一些方法,如gu ...
- CSS3 3D变换
可以这么说,3D变换是基于三维坐标系的.以下是“盗用”的图 CSS3中的3D变换主要包括以下几个功能函数: 3D位移:包括translateZ()和translate3d(): 3D旋转:包括rota ...
- CSS3 3D变换实例 滚动的正方体
笔记: 2D变换 transform 位移 translateX() translateY() 简写:translate(X值,Y值) 正值向右,负值向左 旋转 rotate() rotat ...
- [UWP-小白日记16]UWP中的3D变换API
原文:[UWP-小白日记16]UWP中的3D变换API 还没开始 好久没写博客了,再来开坑. 正文 Transform3D:“这个和CSS的3D好像的说” PerspectiveTransform3D ...
- CSS3之3d变换与关键帧
3d变换是在transform基础上实现的 transform-style:preserve-3d; 建立3d空间 perspective:; 景深(设置用户看的距离) perspective-ori ...
- 关于ios 3D变换 CGAffineTransformIdentity
每次做完3D变换以后,重新设置view的frame时,记得用CGAffineTransformIdentity 对3D变换进行还原,否则将会影响frame.当你对view进行3D变换后,重新设置vie ...
- OpenGL学习进程（12）第九课：矩阵乘法实现3D变换
本节是OpenGL学习的第九个课时,下面将详细介绍OpenGL的多种3D变换和如何操作矩阵堆栈. (1)3D变换: OpenGL中绘制3D世界的空间变换包括:模型变换.视图变换.投影变换和视口 ...
- [OpenGL ES 03]3D变换：模型，视图，投影与Viewport
[OpenGL ES 03]3D变换:模型,视图,投影与Viewport 罗朝辉 (http://blog.csdn.net/kesalin) 本文遵循“署名-非商业用途-保持一致”创作公用协议 系列 ...
随机推荐
- Spring-IOC 扩展点 BeanFactoryPostProcessor及其子接口解析
BeanFactoryPostProcessor 接口的英文描述: Allows for custom modification of an application context's bean de ...
- 《阿里巴巴 Java 开发手册》划重点！
[强制]小数类型为 decimal,禁止使用 float 和 double. 说明:float 和 double 在存储的时候,存在精度损失的问题,很可能在值的比较时,得到不 正确的结果.如果存储的数 ...
- ethjs-1-了解
https://github.com/ethjs/ethjs/blob/master/docs/user-guide.md Install npm install --save ethjs Usage ...
- android 7.0以上共享文件（解决调用系统照相和图片剪切出现的FileUriExposedException崩溃问题）
在android7.0开始试共享“file://”URI 将会导致引发 FileUriExposedException. 如果应用需要与其他应用共享私有文件,则应该使用 FileProvider, F ...
- nodeJS---模块与npm包管理工具
nodeJS---模块与npm包管理工具 一:从模块外部访问另一个模块内的成员; 假如我现在还在D盘中的node文件夹内中的app.js代码改成如下: var msg = 'hello'; var f ...
- PAT B1034 有理数四则运算 （20 分）
本题要求编写程序,计算 2 个有理数的和.差.积.商. 输入格式: 输入在一行中按照 a1/b1 a2/b2 的格式给出两个分数形式的有理数,其中分子和分母全是整型范围内的整数,负号只可能出现在分子前 ...
- JavaScript函数注意点
1.return 请注意,函数体内部的语句在执行时,一旦执行到return时,函数就执行完毕,并将结果返回.因此,函数内部通过条件判断和循环可以实现非常复杂的逻辑. 如果没有return语句,函数执行 ...
- java中sleep（）方法的解析
Thread.sleep(3000); 就是指让当前正在运行的占用cpu时间片的线程挂起3000ms,把cpu的时间片交给其他线程,但是并没有指定把CPU的时间片接下来到底交给哪个线程,而是让这些线程 ...
- nrf52832 连接参数更新过程
ble 连接参数更新过程如下: 一般分三个过程 一 .主机发起连接(带有一个连接参数,一般都是 7.5ms) 二.主机更新连接参数 (举例:NRF CONNECT 安卓app软件 45ms). 三.从 ...
- odoo之ERP系统
odoo大纲 第一部分:数据库postgressql 大象 第二部分:ORM(API) 第三部分:客户端 用python软件写: .py文件 包含两部分:1.自定义部分,由自己写,定义类和功能. .继 ...