一.空间（3D）转换

目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果。
属性：transform

（1）位移效果（Z轴方向需要配合perspective透视使用）

空间位移的目标：使用translate实现元素空间位移效果

语法
transform: translate3d(x, y, z);
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);

取值（正负均可）像素单位数值或百分比

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>空间位移</title><style>body{perspective: 100px;}.box {width: 200px;height: 200px;margin: 100px auto;background-color: pink;transition: all .5s;}.box:hover {transform: translate3d(50px, 100px, 20px);transform: translate3d(50px, 100px, -20px);/* transform: translateX(500px); *//* transform: translateY(500px); *//* transform: translateZ(500px); */}</style>
</head>
<body><div class="box"></div>
</body>
</html>

（2）透视效果

目标：使用perspective属性实现透视效果
~~~~加给父级元素
实现近大远小、近实远虚的视觉效果

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>透视效果</title><style>body {/* 加到父级元素，这里 */perspective: 1000px;/* perspective: 200px; *//* perspective: 10000px; */}.box {width: 200px;height: 200px;margin: 100px auto;background-color: pink;transition: all 0.5s;}.box:hover{/*正值是向我移动，会出现近大的效果*/transform: translateZ(200px);/*负值是远离我移动，会出现远小的效果*//* transform: translateZ(-200px); */}</style>
</head>
<body><div class="box"></div>
</body>
</html>

（3）空间旋转

目标：使用rotate实现元素空间旋转效果

语法：
transform:rotateZ(值);
transform:rotateX(值);
transform:rotateY(值)

Z轴—绕中心点旋转

代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>空间旋转-Z轴</title><style>.box {width: 300px;margin: 100px auto;}img {width: 300px;transition: all 2s;}.box img:hover {transform: rotateZ(360deg);}</style>
</head>
<body><div class="box"><img src="./images/hero.jpeg" alt=""></div>
</body>
</html>

X轴—以水平线为轴，绕水平线转

    <style>.box {width: 300px;margin: 100px auto;}img {width: 300px;transition: all 2s;}.box {/* 透视效果：近大远小，近实远虚 */perspective: 1000px;}.box img:hover {transform: rotateX(60deg);transform: rotateX(-60deg);}</style>

Y轴—以垂直线为轴，绕垂直线转

    <style>.box {width: 300px;margin: 100px auto;}img {width: 300px;transition: all 2s;}.box {/* 透视效果：近大远小，近实远虚 */perspective: 1000px;}.box img:hover {transform: rotateY(60deg);transform: rotateY(-60deg);}</style>

查看效果：

（4）立体呈现
目标：使用transform-style: preserve-3d呈现立体图形

小实例

代码块
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>立体呈现</title><style>.cube {子绝父相position: relative;width: 200px;height: 200px;margin: 100px auto;background-color: pink;transition: all 2s;transform-style: preserve-3d;}.cube div {子绝父相position: absolute; left: 0;top: 0;width: 200px;height: 200px;}.front {background-color: orange;/* 向我走近200px *//* 让一个靠近我，一个不靠近，就会实现两个面之间的距离感 */transform: translateZ(200px);}.back {background-color: green;}/* cube hover 为了看空间感效果，鼠标放上去后 都绕Y轴转120度 */.cube:hover {transform: rotateY(120deg);}</style>
</head>
<body><div class="cube"><div class="front">前面</div><div class="back">后面</div></div>
</body>
</html>

二.3D导航

该过程代码块
/* ①先子绝父相  将两个页面都放在前面重合，橙色会显示在前面 */.navs li a {position: absolute;left: 0;top: 0;display: block;width: 100%;height: 100%;text-align: center;text-decoration: none;color: #fff;}.navs li a:first-child {background-color: green;/* ④按它的坐标轴，将平面前移20px */transform: translateZ(20px);}   .navs li a:last-child {background-color: orange;/* ②使用rotateX(90deg)将橙色绕X轴旋转90度，竖着变平 *//* ③使用translateZ(20px)将平着的页面沿Z轴上移20px */transform: rotateX(90deg) translateZ(20px) ;}

        /* li:hover 立方体旋转 */.navs li:hover {transform: rotateX(-90deg);}

完整的代码块

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>3D导航</title><style>ul {margin: 0;padding: 0;list-style: none;}.navs {width: 300px;height: 40px;margin: 50px auto;}.navs li {position: relative;float: left;width: 100px;height: 40px;line-height: 40px;transition: all .5s;transform-style: preserve-3d;/* 旋转: 让大家在写代码的过程中看到立体盒子 *//* transform: rotateX(-20deg) rotateY(30deg); *//* 测试缩放效果 *//* transform: scale3d(0.5, 1.1, 2); */}/* ①先子绝父相  将两个页面都放在前面重合，橙色会显示在前面 */.navs li a {position: absolute;left: 0;top: 0;display: block;width: 100%;height: 100%;text-align: center;text-decoration: none;color: #fff;}.navs li a:first-child {background-color: green;/* ④按它的坐标轴，将平面前移20px */transform: translateZ(20px);}   .navs li a:last-child {background-color: orange;/* ②使用rotateX(90deg)将橙色绕X轴旋转90度，竖着变平 *//* ③使用translateZ(20px)将平着的页面沿Z轴上移20px */transform: rotateX(90deg) translateZ(20px) ;}/* li:hover 立方体旋转 */.navs li:hover {transform: rotateX(-90deg);}</style>
</head>
<body><div class="navs"><ul><li><a href="#">首页</a><a href="#">Index</a></li><li><a href="#">登录</a><a href="#">Login</a></li><li><a href="#">注册</a><a href="#">Register</a></li></ul></div>
</body>
</html>

三.3D缩放

            /* 测试缩放效果  在上面的3D导航中可查看缩放效果*/transform: scale3d(0.5, 1.1, 2);

CSS高级功能—3D空间转换（位移、透视、空间旋转）—3D导航—3D缩放相关推荐

HTML+CSS：transform空间转换、translate3d空间位移、perspective透视、rotate3d空间旋转\立方体、scale3d空间缩放
文章目录 transform: translate3d(x, y, z) 使用perspective属性实现透视效果 transform: rotateXYZ实现元素空间旋转效果 transform- ...
移动Web【空间转换[空间位移、透视、空间旋转、立体呈现、3D导航、空间缩放]、动画、综合案例】
文章目录一.空间转换 1.1 空间位移 1.2 透视 1.3 空间旋转 1.4 立体呈现 1.5 3D导航 1.6 空间缩放二.动画 2.1 动画的实现步骤 2.2 动画属性三.综合案例 2.1 ...
移动web 空间转换 3D
移动web 空间转换 3D 空间转换 3D 3D位移透视 3D旋 rotateX rotateY 左手法则立体呈现空间转换 3D 3D坐标系 3D 坐标系比2D 多了一个Z轴. 一定要记住3个坐 ...
day02-移动web(空间转换)
day02-移动web @[TOC](day02-移动web) 一.空间转换 1.1 空间位移 1.2 透视效果 1.3开启3d空间 1.4 空间旋转 1.4.1 空间旋转-Z轴 1.4.2 空间旋转 ...
Unity ShaderLab 坐标空间转换及方法
shader基础 shader空间坐标介绍未完成的空间转换表数据类型名称 shader中的变量名数据类型说明 vertex POSITION float4 顶点在空间中的位置 normal ...
RGB图像转换到CIELab空间的研究及优化
第一次写博客,没有太多经验,初入图像处理方向的炒鸡菜鸟,看着大神们都有自己的博客,而且总是学习大神的文章,心里除了满满的敬佩,还有一丝丝的失落,后悔自己当初读本科时没学计算机方向,现在研究僧半路出家学 ...
matlab转换hsl,RGB空间与HSL空间转换matlab代码
关于RGB与HSL空间之间转换的原理,在网上很多,也很详细,这里就不做介绍了. 直接给出MATLAB代码. %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% % RGB空间转换到H ...
色彩空间转换（RGB空间与Lab空间）
颜色迁移是计算机视觉领域的一个很有趣的问题,它实际上要我们解决这么一个问题:基于图像A和图像B,合成一幅新的图像C,使其同时具有A的颜色和B的形状等遗传信息,即图像B在不改变它自身所表达的形状信息的情 ...
【Unity3D】3D 视图操作 ( 视图基本元素 | 导航器 | 栅格 | 天空盒 | 3D 视图操作 | 视图旋转 | 视图缩放 | 视图平移 | 导航器操作 | 恢复方向 | 顶、右、前视图 )
文章目录一.3D 视图基本元素 1.导航器 Gizmo 2.栅格 Grid 3.天空盒 Skybox 二.3D 视图操作 1.视图旋转 2.视图缩放 3.视图平移三.导航器操作 1.恢复方向 2. ...

CSS高级功能—3D空间转换（位移、透视、空间旋转）—3D导航—3D缩放