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) 本文遵循“署名-非商业用途-保持一致”创作公用协议 系列 ...
随机推荐
- Tengine 2.1.2 (nginx/1.6.2)安装配置，淘宝 Web 服务器
简介 Tengine是由淘宝网发起的Web服务器项目.它在Nginx的基础上,针对大访问量网站的需求,添加了很多高级功能和特性.Tengine的性能和稳定性已经在大型的网站如淘宝网,天猫商城等得到了很 ...
- BZOJ3105:[CQOI2013]新Nim游戏(线性基,贪心)
Description 传统的Nim游戏是这样的:有一些火柴堆,每堆都有若干根火柴(不同堆的火柴数量可以不同).两个游戏者轮流操作,每次可以选一个火柴堆拿走若干根火柴.可以只拿一根,也可以拿走整堆火柴 ...
- 3532: [Sdoi2014]Lis
Description 给定序列A,序列中的每一项Ai有删除代价Bi和附加属性Ci.请删除若干项,使得4的最长上升子序列长度减少至少1,且付出的代价之和最小,并输出方案. 如果有多种方案,请输出将删去 ...
- Odoo开发调试技巧
转载请注明原文地址:https://www.cnblogs.com/cnodoo/p/9307490.html 一:Odoo控制台error日志一般为以下格式 Traceback (most rec ...
- 【转载】python中利用smtplib发送邮件的3中方式 普通/ssl/tls
#!/usr/bin/python # coding:utf- import smtplib from email.MIMEText import MIMEText from email.Utils ...
- Ubuntu18.04安装Teamviewer
首先,打开TeamViewer的下载页面,下载Debian/Ubuntu的Deb安装包. 这里有64位和32位安装包选项.可以在Terminal(终端)中输入uname -a 查看自己系统版本是64位 ...
- Ubuntu16.04 kaldi的简单配置
1.什么是kaldi kaldi是使用c++写的语音识别的工具,apache 授予了v2.0的证书(果真应验,apache旗下无弱将).kaldi旨在供语音识别研究员使用.kaldi在目标和范围上和H ...
- 各种 mv power cell
1. retention register : VDDB 是 backup power,当primary power shutoff 时 backup 会继续供电,将 reg 当前状态保存下来 2. ...
- 20155232《网络对抗》Exp2 后门原理与实践
20155232<网络对抗>Exp2 后门原理与实践 问题回答 1.例举你能想到的一个后门进入到你系统中的可能方式? 通过网页上弹出来的软件自动安装 2.例举你知道的后门如何启动起来(wi ...
- 20155321 《网络攻防》 Exp3 免杀原理与实践
20155321 <网络攻防> Exp3 免杀原理与实践 基础问题回答 杀软是如何检测出恶意代码的? 根据实验指导书,杀软有两个方法可以检测出恶意代码.第一种是基于特征码,即先对流行代码特 ...