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) 本文遵循“署名-非商业用途-保持一致”创作公用协议 系列 ...
随机推荐
- android studio InnerClass annotations are missing corresponding EnclosingMember annotations. Such InnerClass annota
如果 你的项目中使用了注解插件 比如butterknife 升级3.1之后打包编译 出现以下错误提示 InnerClass annotations are missing correspondi ...
- Spring Boot Actuator RCE
来看一下IDEA如何调试Spring Boot 先在https://github.com/artsploit/actuator-testbed下载源码 如下命令就能通过maven环境启动 mvn in ...
- 随手练——HDU 1078 FatMouse and Cheese（记忆化搜索）
http://acm.hdu.edu.cn/showproblem.php?pid=1078 题意: 一张n*n的格子表格,每个格子里有个数,每次能够水平或竖直走k个格子,允许上下左右走,每次走的格子 ...
- 多线程之CAS
在JDK 5之前Java语言是靠synchronized关键字保证同步的,这会导致有锁 锁机制存在以下问题: (1)在多线程竞争下,加锁.释放锁会导致比较多的上下文切换和调度延时,引起性能问题. (2 ...
- WorldWind源码剖析系列：窗口定制控件类WorldWindow
在WorldWindow定制控件是从Control类派生出来的,需要自己操纵GDI+绘制所需要的界面效果,这种自定义控件比较耗费精力,需要比较深厚的GDI+和DirectX 3D开发功底.(区别于用户 ...
- UART, SPI, IIC的详解及三者的区别和联系
UART.SPI.IIC是经常用到的几个数据传输标准,下面分别总结一下: UART(Universal Asynchronous Receive Transmitter):也就是我们经常所说的串口,基 ...
- Mac下FTP的使用
高版本的mac os默认关掉了FTP服务,打开“终端”之后,可用如下命令打开: sudo -s launchctl load -w /System/Library/LaunchDaemons/ftp. ...
- SS、SP、BP寄存器
SS, SP, BP 三个寄存器 SS:存放栈的段地址: SP:堆栈寄存器SP(stack pointer)存放栈的偏移地址; BP: 基数指针寄存器BP(base pointer)是一个寄存器,它的 ...
- 没事做的Delphi版的俄罗斯方块游戏Demo
源代码下载
- Oracle-归档日志详解（运行模式、分类）
一.Oracle日志分类 分三大类: Alert log files--警报日志,Trace files--跟踪日志(用户和进程)和 redo log 重做日志(记录数据库的更改 ...