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) 本文遵循“署名-非商业用途-保持一致”创作公用协议 系列 ...
随机推荐
- [CTSC2018]混合果汁
题目连接:https://www.luogu.org/problemnew/show/P4602 因为题中说是让最小值最大,所以自然想到二分答案.对于每一个二分的值,判断是否合法,若合法,在右区间二分 ...
- [Usaco2007 Jan]Balanced Lineup
嘟嘟嘟 一道RMQ板子题,分别维护最大值和最小值,不解释. #include<cstdio> #include<iostream> #include<algorithm& ...
- Git branch -r 无法获取远程分支，ui可以看见分支但是git 命令无法查看解决方案
zhc@hongchangfirst$ git checkout -b hongchangfirst origin/hongchangfirst 出现: fatal: Cannot update pa ...
- resnet模型详细结构
resnet有5个stage,每个stage缩小一倍(即stride2).第1个stage是7*7个卷积大的缩小1倍,第2个stage是通过max-pooling缩小1倍,后面3个stage都是在各自 ...
- Maven搭建私服
为什么要搭建私服?搭建私服有什么好处? 以我最近技术调研和相关的使用为起点概述: 首先说明,为什么要搭建私服? 搭建私服的目的是,通常企业项目开发,特别是使用maven作为项目管理,现在非常流行使用m ...
- 如何快速找到某个研究领域的所有SCI期刊
https://www.toutiao.com/a6624332265285485060/?tt_from=dingtalk&utm_campaign=client_share&tim ...
- 树莓派学习笔记（2）：常用linux命令
转载请注明:@小五义http://www.cnblogs.com/xiaowuyi 1.ls命令:列出文件目录的常用命令,主要参数见下表. -a 列出目录下的所有文件,包括以.开头的隐含文件. -b ...
- scapy学习笔记（2）--包及包的定义
转载请注明:@小五义:http://www.cnblogs/xiaowuyi 一.包 包(Packet)是TCP/IP协议通信传输中的数据单位,一般也称“数据包”.其主要由“目的IP地址”.“源IP地 ...
- python argparse模块：命令行选项及参数解析
位置参数:给一个例子: import argparse parser = argparse.ArgumentParser() parser.add_argument("echo") ...
- CAN总线学习系列之— CAN总线特点介绍
CAN总线学习系列之— CAN总线特点介绍 CAN 总线作为一种工业界的流行总线广泛应于工业自动化.多种控制设备.交通工具.医疗仪器以及建筑.环境控制等各个行业中,它是是一种多主机局域网,所以这样 一 ...