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) 本文遵循“署名-非商业用途-保持一致”创作公用协议 系列 ...
随机推荐
- 7、JVM--虚拟机类加载机制
7.1.概述 再类文件结构中 在Class文件中描述的各种信息,最终都需要加载到虚拟机中之后才能运行和使用. 而虚拟机如何加载这些Class文件?Class文件中的信息进入到虚拟机后会发生什么变化? ...
- dubbo和rabbitmq对比
随着项目越来越大,局势就是项目拆分,大项目拆分成很多项目,各种技术也应允而生.从应用交互层面,按我的理解dubbo和rabbitmq就对比分析进行学习.dubbo和zookeeper结合 1.zoo ...
- Failed to fetch URL https://dl-ssl.google.com/android/repository/addons_list-2.xml
解决方法来源:http://www.cnblogs.com/kaka-bing/archive/2012/10/31/2747490.html 问题描述: 使用Android SDK Manager检 ...
- 蓝桥杯 历届试题 网络寻路（dfs搜索合法路径计数）
X 国的一个网络使用若干条线路连接若干个节点.节点间的通信是双向的.某重要数据包,为了安全起见,必须恰好被转发两次到达目的地.该包可能在任意一个节点产生,我们需要知道该网络中一共有多少种不同的转发路径 ...
- nginx反向代理 强制https请求 + 非root用户起80,443端口
1. #强制使用https跳转 return 301 https://$server_name$request_uri;rewrite ^(.*)$ https://${server_name}$1 ...
- 1-安装MQTT服务器(Windows),并连接测试
对于不知道MQTT的肯定会问MQTT是干什么的....... 现在我有一个项目需求, 看到这个项目第一想法肯定需要一个服务器,所有的wifi设备和手机都去连接这个服务器,然后服务器进行信息的中转,类似 ...
- TTL,COMS,USB,232,422,485电平之详细介绍及使用
如有错误敬请指导! 今天来详细介绍一下TTL,COMS,USB,232,422,485电平,以及之间的转换问题. 有些地方的引脚图可能不是规范的,具体引脚以自己的模块资料为主,这篇文章着重介绍使用.. ...
- mysql数据库怎么存入emoji表情，更改utf8mb4后为什么出现全是问号
在项目中遇到有人存emoji表情,出现如下错误: java.sql.SQLException: Incorrect string value: '\xF0\x9F\x92\x94' for colum ...
- 关于mydumper的.metadata文件丢失
今天要进行MySQL的数据迁移,所以把数据库通过mydumper工具备份的文件解压后.通过myloader进行导入 可是导入的时间出现这个报错: ** (myloader:766): CRITICAL ...
- 20155202张旭 Exp3 免杀原理与实践
20155202张旭 Exp3 免杀原理与实践 AV厂商检测恶意软件的方式主流的就三种: 基于特征码的检测 启发式恶意软件检测 基于行为的恶意软件检测 我们要做的就是让我们的恶意软件没法被这三种方式找 ...