CSS3_3D 变换
3D 变换
1. 在 2D 父元素中，绕轴旋转，效果需要想象
#ele_3d {
width:
transform: rotateX(2deg);
}rotateX 为正，元素左上角往里跑。。。对象在 x 轴上的旋转角度，正方向向右
rotateY 为正，元素左上角往外跑。。。对象在 x 轴上的旋转角度，正方向向上
rotateZ 为正，元素在视觉上顺时针旋转。。。对象在 z 轴上的旋转角度，正方向向屏幕外
2. 给父元素设置 transform-style: preserve-3d; 开启 3D 空间
#box_3d {
width: 300px;
height: 300px;
background-color: #f006; /* 开启 3D 空间 */
transform-style: preserve-3d;
/*
transform-style:
只有两个属性值：
flat （默认值）表示所有子元素在2D平面呈现
preserve-3d， 表示所有子元素在3D平面呈现，（prederve是保护、维持的意思，preserve-3d就是保持三维空间的意思） */
/* 实现近大远小 : 景深 */
perspective:;
}
3. 拓展
- perspective: 300;
- 往景深里走，元素会越来越小
- perspective 用于激活一个3D空间，属性值就是景深大小（默认none无景深）
- 开启 3D 空间 元素的所有后代元素都会受影响，（如果后代元素中也添加了perspective属性，效果会叠加而不是覆盖）
- 参数大于等于 0（不能为负）
- 景深中心点 perspective-origin: 50% 50%; （视锥顶点）
- 改变观察者 的视觉
- 给谁设置的 perspective ，就给谁设置 perspective-origin
- perspective 的值越大，元素的效果越接近于 2D 变换的效果。
- 给父元素设置景深
- transform: perspective(300px);
- 给子元素设置景深
- transform: perspectiv(300px) translate(-200px);
- 元素背面是否可见
- backface-visibity: visible; // 默认值
- backface-visibity: visible; // 背面是不可见的
- scaleZ(2); // 会使元素的厚度变成 2 ，默认为 1。。。到 scaleZ(0); 时元素消失
- 变换基点 综合变换
- 变换基点 transform-origin: 50% 50% 0; ____几何元素最中心为 xyz点：
- transform-origin: top;
- transform-origin: left;
- transform-origin: right;
- transform-origin: bottom;
- transform-origin: 100px 100px 0; /* 变换基点的 z 只能使用具体数值 */
- transform-origin: top left;
- transform-origin: bottom right;
3D 旋转盒子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>3D 旋转盒子</title> <style type="text/css">
body {
width: 100%;
color: #000;
background: #96b377;
font: 14px Helvetica, Arial, sans-serif; padding: 600px;
} /**** CSS3 3D 盒子****/
#six_3d_box {
position: relative;
width: 600px;
height: 600px; transform-style: preserve-3d; /* 开启 父元素 3D 空间 */ transform-origin: 50% 50% -300px; list-style: none;
} #six_3d_box li {
position: absolute;
width: 600px;
height: 600px; line-height: 600px;
text-align: center;
} #six_3d_box li.one {
top: 0px;
left: 0px; background-color: #ddd3;
} #six_3d_box li.two {
top: -600px;
left: 0px; transform-origin: 50% 100% 0;
transform: rotateX(90deg); background-color: #ccc3;
} #six_3d_box li.three {
top: 0px;
left: 600px; transform-origin: 0 50% 0;
transform: rotateY(90deg); background-color: #eee3;
} #six_3d_box li.four {
top: 0px;
left: -600px; transform-origin: 100% 50% 0;
transform: rotateY(-90deg); background-color: #cfe3;
} #six_3d_box li.five {
top: 600px;
left: 0px; transform-origin: 50% 0 0;
transform: rotateX(-90deg); background-color: #efc3;
} #six_3d_box li.six {
top: 0px;
left: 0px; transform: translateZ(-600px) rotateY(180deg); /* 沉底 翻一面 */ background-color: #afa3;
} </style>
</head> <body> <ul id="six_3d_box">
<li class="one">1</li>
<li class="two">2</li>
<li class="three">3</li>
<li class="four">4</li>
<li class="five">5</li>
<li class="six">6</li>
</ul> <!-- javascript 代码 -->
<script type="text/javascript"> var theBox = document.getElementById("six_3d_box");
var boxX = 0;
var boxY = 0; var isRight = true;
window.setInterval(function(){
if(isRight){
boxX++;
boxY++;
}else{
boxX--;
boxY--;
}; if(Math.abs(boxX) >= 360 || Math.abs(boxY) >= 360){
isRight = !isRight;
}; theBox.style.transform = "rotateX("+boxX+"deg) rotateY("+boxY+"deg)";
},30); </script>
</body>
</html>
3D 盒子的炸裂 3D 盒子中的 3D 盒子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>3D 盒子的炸裂，3D 盒子中的 3D 盒子</title> <style type="text/css">
body {
width: 100%;
color: #000;
background: #96b377;
font: 14px Helvetica, Arial, sans-serif; padding: 600px;
} /**** CSS3 3D 盒子****/
#six_3d_box>li>img {
width: 400px;
height: 400px;
} #inner_3d_box>li>img {
width: 200px;
height: 200px;
} #six_3d_box {
position: relative;
width: 400px;
height: 400px; transform-style: preserve-3d; /* 开启 父元素 3D 空间 */ transform-origin: 50% 50% -200px;
transform: rotateX(0deg) rotateY(0deg); list-style: none;
} #six_3d_box>li {
position: absolute;
width: 400px;
height: 400px; line-height: 400px;
text-align: center;
transition: 1s all ease 0s;
} #six_3d_box:hover>li>img {
transform: scale(160px);
} #six_3d_box>li.one {
top: 0px;
left: 0px; background-color: #ddd0;
} #six_3d_box:hover>li.one {
transform: translateZ(160px);
} #six_3d_box>li.two {
top: -100%;
left: 0px; transform-origin: 50% 100% 0;
transform: rotateX(90deg); background-color: #ccc0;
} #six_3d_box:hover>li.two {
transform:rotateX(90deg) translateZ(160px);
} #six_3d_box>li.three {
top: 0px;
left: 100%; transform-origin: 0 50% 0;
transform: rotateY(90deg); background-color: #eee0;
} #six_3d_box:hover>li.three {
transform:rotateY(90deg) translateZ(160px);
} #six_3d_box>li.four {
top: 0px;
left: -100%; transform-origin: 100% 50% 0;
transform: rotateY(-90deg); background-color: #cfe0;
} #six_3d_box:hover>li.four {
transform: rotateY(-90deg) translateZ(160px);
} #six_3d_box>li.five {
top: 100%;
left: 0px; transform-origin: 50% 0 0;
transform: rotateX(-90deg); background-color: #efc0;
} #six_3d_box:hover>li.five {
transform: rotateX(-90deg) translateZ(160px);
} #six_3d_box>li.six {
top: 0px;
left: 0px; transform:rotateY(180deg) translateZ(400px) ; /* 翻一面 沉底 */ background-color: #afa0;
} #six_3d_box:hover>li.six {
transform: rotateY(180deg) translateZ(560px);
} /**** Inner 3D Box ****/
#inner_3d_box {
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px; width: 200px;
height: 200px; transform-style:preserve-3d;
transform-origin: 50% 50% -100px;
transform: translateZ(-100px); list-style: none;
background-color: #f000;
} #inner_3d_box>li {
width: 200px;
height: 200px; position: absolute; line-height: 200px;
text-align: center;
transition: 1s all ease 0s;
} #inner_3d_box>li.inner_1 {
top: 0px;
left: 0px;
} #inner_3d_box>li.inner_2 {
top: -100%;
left: 0px; transform-origin: 50% 100% 0;
transform: rotateX(90deg); background-color: #ccc0;
} #inner_3d_box>li.inner_3 {
top: 0px;
left: 100%; transform-origin: 0 50% 0;
transform: rotateY(90deg); background-color: #eee0;
} #inner_3d_box>li.inner_4 {
top: 0;
left: -100%; transform-origin: 100% 50% 0;
transform: rotateY(-90deg); background-color: #cfe0;
} #inner_3d_box>li.inner_5 {
top: 100%;
left: 0px; transform-origin: 50% 0 0;
transform: rotateX(-90deg); background-color: #efc0;
} #inner_3d_box>li.inner_6 {
top: 0px;
left: 0px; transform: translateZ(-200px) rotateY(180deg);
}
</style>
</head> <body> <ul id="six_3d_box">
<li class="one"><img src="./img/Start.jpg" /></li>
<li class="two"><img src="./img/Loki2.jpg" /></li>
<li class="three"><img src="./img/StanLee.jpg" /></li>
<li class="four"><img src="./img/Thanos.jpg" /></li>
<li class="five"><img src="./img/Thor.jpg" /></li>
<li class="six"><img src="./img/YonDu.jpg" /></li>
<ul id="inner_3d_box">
<li class="inner_1"><img src="./img/BlackWidow.jpg" /></li>
<li class="inner_2"><img src="./img/Deadpool.jpg" /></li>
<li class="inner_3"><img src="./img/Groot.jpg" /></li>
<li class="inner_4"><img src="./img/Hock.jpg" /></li>
<li class="inner_5"><img src="./img/RocketRaccoon.jpg" /></li>
<li class="inner_6"><img src="./img/SpiderMan.jpg" /></li>
</ul>
</ul> <!-- javascript 代码 -->
<script type="text/javascript"> var theBox = document.getElementById("six_3d_box");
var boxX = 0;
var boxY = 0; var isRight = true;
window.setInterval(function(){
if(isRight){
boxX++;
boxY++;
}else{
boxX--;
boxY--;
}; if(Math.abs(boxX) >= 360 || Math.abs(boxY) >= 360){
isRight = !isRight;
}; theBox.style.transform = "rotateX("+boxX+"deg) rotateY("+boxY+"deg)";
},30); </script>
</body>
</html>
CSS3_3D 变换的更多相关文章
- BZOJ 1692: [Usaco2007 Dec]队列变换 [后缀数组 贪心]
1692: [Usaco2007 Dec]队列变换 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 1383 Solved: 582[Submit][St ...
- Hilbert-Huang Transform（希尔伯特-黄变换）
在我们正式开始讲解Hilbert-Huang Transform之前,不妨先来了解一下这一伟大算法的两位发明人和这一算法的应用领域 Section I 人物简介 希尔伯特:公认的数学界“无冕之王”,1 ...
- 【Win 10 应用开发】三维变换
所谓三维变换,其实是在二维平面上产生三维的视觉效果.前面老周简单提了一下透视效果,如果透视效果不能满需求,那可以考虑用三维变换. UIElement类有一个属性叫Transform3D,它定义的类型为 ...
- CSS3之3d变换与关键帧
3d变换是在transform基础上实现的 transform-style:preserve-3d; 建立3d空间 perspective:; 景深(设置用户看的距离) perspective-ori ...
- 纯CSS3实现多层云彩变换飞行动画
查看效果:http://hovertree.com/texiao/css3/4/效果2 效果图: 代码如下: <!doctype html> <html lang="zh& ...
- CSS3之过渡及2D变换
transition过渡 transition-duration:; 运动时间 transition-delay:; 延迟时间 transition-timing-function:; 运动形式 ea ...
- 为什么FFT时域补0后，经FFT变换就是频域进行内插？
应该这样来理解这个问题: 补0后的DFT(FFT是DFT的快速算法),实际上公式并没变,变化的只是频域项(如:补0前FFT计算得到的是m*2*pi/M处的频域值, 而补0后得到的是n*2*pi/N处的 ...
- 相机变换与Ray-Casting
p { margin-bottom: 0.1in; direction: ltr; line-height: 120%; text-align: justify; orphans: 0; widows ...
- 关于CSS3的小知识点之2D变换
transition过渡 transition-duration:; 运动时间 transition-delay:; 延迟时间 transition-timing-function:; 运动形 ...
随机推荐
- Run Configurations(Debug Configurations)->Arguments里填写program arguments和VM arguments
如图: 1.program arguments存储在String[] args里 2.VM arguments设置的是虚拟机的属性,是传给java虚拟机的.KV形式存储的,是可以通过System.ge ...
- flyway和liquibase的使用样例
在代码上我们有svn和git等诸多的版本控制方法. 但是在数据库上却没有相应的工具.一度导致多环境见的数据库同步难以维持. flyway和liquibase都是常见的数据库版本控制工具. flyway ...
- Shiro 系列: 简单命令行程序示例
在本示例中, 使用 INI 文件来定义用户和角色. 首先学习一下 INI 文件的规范. =======================Shiro INI 的基本规范================== ...
- $\be$-QGE 的弱强唯一性
在 [Zhao, Jihong; Liu, Qiao. Weak-strong uniqueness criterion for the $\beta$-generalized surface qua ...
- [物理学与PDEs]第4章第2节 反应流体力学方程组 2.3 混合气体状态方程
1. 记号与假设 (1) 已燃气体的化学能为 $0$. (2) 单位质量的未燃气体的化学能为 $g_0>0$. 2. 对多方气体 (理想气体当 $T$ 不高时可近似认为), $$\bex ...
- 使用 MERGE 语句实现增删改
Ø 简介 在平常编写增删改的 SQL 语句时,我们用的最多的就是 INSERT.UPDATE 和 DELETE 语句,这是最基本的增删改语句.其实,SQL Server 中还有另外一个可以实现增删改 ...
- rem是怎么计算的
「rem」是指根元素(root element,html)的字体大小,从遥远的 IE6 到版本到 Chrome 他们都约好了,根元素默认的 font-size 都是 16px. rem是通过根元素进行 ...
- react中input自动聚焦问题
input自动聚焦问题 在react中可以使用refs解决这个问题,首先看一下refs的使用场景: (1)处理焦点.文本选择或媒体控制. (2)触发强制动画. (3)集成第三方 DOM 库. 使用re ...
- Spring+Shiro的踩坑
今天想给某个Service的某些方法添加Cache,这个记为A,用的springboot,照常在方法上加上Cacheable注解,测试缓存生效,搞定.然后再在第二个Service,记为B,添加Cach ...
- WPS或xls 数据分列 清洗
一 .一般分离 时间:2017年11月27日14:55:12 数据如下: 501陈**:田莨铺58 502陈**:田莨铺58 503陈**.六麻杨冲58元 504陈**.石脚哗.200元 505陈** ...