当前位置： 首页 > article >正文

CSS-transform【下】(3D转换)【看这一篇就够了！！！】

article 2024/9/25 7:09:38

目录

前言

3D转换

perspective透视

translate 3D 位移

translateZ(x)

translate3d

rotate 3D 旋转

3D旋转方向

左手法则

rotateX、rotateY、rotateZ

transform-style

2D 与 3D 简单总结

变换函数

重要属性

应用案例

3D导航

前言

CSS-transform【上】(2D转换)【看这一篇就够了！！！】-CSDN博客

3D转换

下图是一个3D转换坐标图，看明白这张图对于学习3D转换是很有必要的：

  • 元素的左上角坐标为(0，0，0)
  • x轴右边为正方向
  • y轴下方为正方向
  • z轴垂直电脑屏幕

perspective透视

  • 没有透视定义，就没有3D
  • 透视是指在平面上秒回物体的空间关系的方法
  • 要在平面上描绘物体的空间立体感，需要遵循透视原理中的“近大远小”原则
  • 当一个物体离我们越近，我们看到他会比离我们远的时候大

  • 可以理解为我们站在多远的地方来看这个物体，当我们站的越远，我们看到的物体就会越小，离得越近看到的就越大
  • CSS3中3D transform的“视点”是在浏览器的前方

  • 在CSS3中，用perspective属性来设置透视距，即模拟人站在离屏幕多远的地方来看电脑上显示的元素
  • 如果元素往Z轴正方向移动，离我们越近，看到的物体就越大
  • 如果元素往Z轴负方向移动，离我们越远，看到的物体就越小
  • perspective这个属性要设置在父元素上面

translate 3D 位移

  • translateX(x) 表示水平方向（x 轴）的位移量，与 2D 位移是一样的效果
  • translateY(y) 表示垂直方向（y 轴）的位移量，与 2D 位移是一样的效果
  • translateZ(z) 表示垂直于电脑屏幕方向（z 轴）的位移量
  • translate3d(x,y,z) 表示元素在 x,y,z 三个坐标上的位移量，用来称动元素在 3D 空间中的位置

translateZ(x)

我们要能看到3D效果，必须要配合perspective属性，perspective属性用来定义透视强度

/* 视距为300px  相当于模拟人站在离电脑屏幕300px的位置看这个元素 */
perspective: 300px;

当perspective的值为300px，则300px就会成为的那个下显示效果的基准：

  • translateZ = 0：图形大小正常显示
  • 0 < translateZ < 300：图形越来越大
  • translateZ >= 300：图片不见，相当于图片在你的后面，你肯定是看不见的了
  • translateZ < 0：图形变小
<style>
  .box {
    width: 150px;
    height: 150px;
    border: 2px solid red;
    float: left;
    margin: 100px 30px;
    /* 设置视距为300px */
    perspective: 300px;
    /* 设置视距为900px */
    /* perspective:900px; */
  }
  .item {
    width: 100%;
    height: 100%;
    background-color: rgb(240, 230, 140, 0.7);
  }
  .item1 {
    transform: translateZ(100px);
  }
  .item2 {
    transform: translateZ(-100px);
  }
  .item3 {
    transform: translateZ(0px);
  }
</style>
<body>
  <div class="box">
    <div class="item item1">translateZ(100px)</div>
  </div>
  <div class="box">
    <div class="item item2">translateZ(-100px)</div>
  </div>
  <div class="box">
    <div class="item item3">translateZ(0px)</div>
  </div>
</body>

 

translate3d

  • 表示元素在 x,y,z 三个坐标上的位移量，用来称动元素在 3D 空间中的位置
  • z 的值不能使用百分比，如果使用会被认为是无效属性
<style>
  .box {
    width: 150px;
    height: 150px;
    border: 2px solid red;
    float: left;
    margin: 100px 30px;
    /* 视距 */
    perspective: 300px;
  }
  .item {
    width: 100%;
    height: 100%;
    background-color: rgb(240, 230, 140, 0.7);
  }
  .item1 {
    /*  
          	x轴正方向移动20px
          	y轴正方向移动30px
          	z轴正方向移动50px
         */
    transform: translate3d(20px, 30px, 50px);
  }
  .item2 {
    transform: translate3d(20px, 30px, -50px);
  }
  .item3 {
    transform: translate3d(-20px, -30px, -50px);
  }
</style>
<body>
  <div class="box">
    <div class="item item1">translate3d(20px, 30px, 50px)</div>
  </div>
  <div class="box">
    <div class="item item2">translate3d(20px, 30px, -50px)</div>
  </div>
  <div class="box">
    <div class="item item3">translate3d(-20px, -30px, -50px)</div>
  </div>
</body>

效果

rotate 3D 旋转

css中通过给transform添加一下变换函数值来实现3D旋转效果

属性值描述
rotateX(ax)表示元素绕X轴旋转一定的角度
ax 表示度数，可以为正，也可以为负
rotateY(ay)表示元素绕Y轴旋转一定的角度
ay 表示度数，可以为正，也可以为负
rotateZ(az)表示元素绕Z轴旋转一定的角度
ax 表示度数，可以为正，也可以为负

3D旋转方向

左手法则

我们并不需要用死记的方式来记住不同轴上的正角和负角的旋转方向，我们可以通过左手法则来记忆

x轴y轴z轴
大拇指方向指向x的正方向，剩下四个手指的方向为x轴旋转的正方向，反过来就是负方向大拇指方向指向y的正方向，剩下四个手指的方向为y轴的的正方向，反过来就是负方向

大拇指方向指向z的正方向，剩下四个手指的方向为z轴旋转的正方向，反过来就是负方向

rotateX、rotateY、rotateZ

<style>
  .box {
    width: 150px;
    height: 150px;
    border: 2px solid red;
    float: left;
    margin: 50px 20px;
    /* 设置3D的透视距，你可以理解为站在多远的地方来看这个物体 */
    perspective: 600px;
  }
  .item {
    width: 150px;
    height: 150px;
    background-color: skyblue;
    font-size: 20px;
  }
  .item1 {
    transform: rotateX(40deg);
  }
  .item2 {
    transform: rotateX(-40deg);
  }
  .item3 {
    transform: rotateY(40deg);
  }
  .item4 {
    transform: rotateY(-40deg);
  }
  .item5 {
    transform: rotateZ(40deg);
  }
  .item6 {
    transform: rotateZ(-40deg);
  }
</style>
<body>
  <div class="box">
    <div class="item item1">rotateX(40deg)</div>
  </div>
  <div class="box">
    <div class="item item2">rotateX(-40deg)</div>
  </div>
  <div class="box">
    <div class="item item3">rotateY(40deg)</div>
  </div>
  <div class="box">
    <div class="item item4">rotateY(-40deg)</div>
  </div>
  <div class="box">
    <div class="item item5">rotateZ(40deg)</div>
  </div>
  <div class="box">
    <div class="item item6">rotateZ(-40deg)</div>
  </div>
</body>

效果

transform-style

设置元素的子元素是位于3D空间中还是平面中

值描述
flat表示所有子元素在 2D 平面呈现。
preserve-3d表示所有子元素在 3D 空间中呈现。
<style>
  .box {
    width: 200px;
    height: 200px;
    border: 2px solid red;
    margin: 20px 150px;
    position: relative;
    /* 视距 */
    perspective: 300px;
    /* 设置元素的子元素是位于 3D 空间中  */
    transform-style: preserve-3d;
  }
  .item {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 0;
    top: 0;
  }
  .item1 {
    background-color: khaki;
    /* x轴正方向顺转60deg */
    transform: rotateX(60deg);
  }
  .item2 {
    background-color: skyblue;
    /* y轴正方向顺转 60deg */
    transform: rotateY(60deg);
  }
</style>
<body>
  <div class="box">
    <div class="item item1"></div>
    <div class="item item2"></div>
  </div>
</body>

效果

2D 与 3D 简单总结

变换函数

  • 位移变换函数：translate(x,y)、 translateX(x) 、 translateY(y) 、 translateZ(y)
    • x,y 的值为单位长度，可以是 px、百分比
    • z 的值只能为 px 长度单位。
    • translate(x) 同等于 translate(x,0);
  • 缩放变换函数：scale(x,y) 、scaleX(x)、 scaleY()
    • x,y 的值为数字，分别表示宽度和长度的缩放比例
    • scale(x) 表示 y 的值和 x 一样大，实现等比缩放
  • 斜切变换函数：skew(ax,ay)、 skewX(ax)、 skewY(ax)
    • ax、ay 分表示水平和垂直拉升，使元素与 x 轴和 y 轴发生的扭曲角度
  • 旋转变换函数：rotate(ax) 、rotateX() 、 rotateY()、 rotateZ()
    • rotate 表示 2D 平面旋转，ax 表示旋转度数，为正，表示顺时针旋转，为负，表示逆时针旋转
    • rotateX( ax) 、rotateY(ay )、rotateZ(az )表示 3D 旋转,旋转的方向，可以通过左手法则来记忆。

重要属性

  • perspective 视距

    • 用来模拟人站在离电脑屏幕多远的距离来看这个元素。
    • 假设 div 的 width:300px;height:300px;perspective:900px;则表示人站在离屏幕 900px 的位置看现在的 div。看到 div 的大小就是我们设置的 width:300px;和 height:300px;的大小
    • 当 div 的 translateZ=0 时，看到的元素大小就是 width:300px 和 height:300px
    • 当 div 的 0<translateZ<300px 时，看到的元素要比实际大
    • 当 div 的 translateZ<0 时，看到的元素要比实际的小
    • 当 div 的 translateZ>300px 时，则看不到元素，因为元素在我们的后面。

  • transform-style 子元素是否在 3D 空间下呈现

    值描述
    flat表示所有子元素在 2D 平面呈现。
    preserve-3d表示所有子元素在 3D 空间中呈现。

  • transform-origin:x y z; 设置变换的原点

    • 默认值为 transform-origin:50% 50% 0;
    • x y 的值可以是长度单位 px 和百分比% 或预设的关键字

应用案例

3D导航

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		body {
			margin: 0;
		}
		ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}
		.container {
			position: fixed;
			top:0;
			left: 0;
			width: 100%;
			height: 50px;
			background-color: pink;
		}
		.container .navigation {
			width: 500px;
			height: 50px;
			margin: 0 auto;
		}
		.container ul li {
			width: 100px;
			height: 50px;
			float: left;
			perspective: 300px;
		}
		.container ul li .box {
			width: 100px;
			height: 50px;
			transition: all 1s;
			transform-style: preserve-3d;
		}
		.box a {
			display:block;
			padding: 0 10px;
			height: 50px;
			text-decoration: none;
			color: #fff;
			line-height: 50px;
			text-align: center;
		}
		a.font {
			background-color: pink;
		}
		a.back {
			background-color: khaki;
			transform-origin: top;
			transform: rotateX(-90deg);
		}
		.container ul li:hover .box{
			transform-origin: 50% 50% -25px;
			transform: rotateX(90deg);
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="navigation">
			<ul>
				<li>
					<div class="box">
						<a href="#" class="font">前端架构</a>
						<a href="#" class="back">前端架构</a>
					</div>
				</li>
				<li>
					<div class="box">
						<a href="#" class="font">前端开发</a>
						<a href="#" class="back">前端开发</a>
					</div>
				</li>
				<li>
					<div class="box">
						<a href="#" class="font">后端开发</a>
						<a href="#" class="back">后端开发</a>
					</div>
				</li>
				<li>
					<div class="box">
						<a href="#" class="font">全栈开发</a>
						<a href="#" class="back">开发</a>
					</div>
				</li>
			</ul>
		</div>
	</div>
</body>
</html>

效果


http://www.kler.cn/news/292852.html

相关文章：

  • 记录｜as string和ToString()的区别
  • 编程式路由跳转
  • opencv轮廓近似，模板匹配
  • 10款好用的电脑监控软件推荐丨2024年干货整理，赶紧码住!
  • 睿赛德科技携手先楫共创RISC-V生态｜RT-Thread EtherCAT主从站方案大放异彩
  • 挑战亿级数据：安企CMS性能优化的探索之路
  • JSON 包裹 PDF 流的编码问题
  • orcle 数据库 day0903
  • 2025年25届必看：如何用Java SpringBoot+Vue搭建大学生成绩量化管理系统？
  • 基于Netty框架的云快充协议+云快充1.5协议+云快充1.6+云快充桩直连+桩直连协议
  • SpringBoot入门
  • 域内安全：委派攻击
  • 13条自动化测试框架设计原则
  • 自主导航的视觉导航机器人：解析ROS、OpenCV、Qt及路径规划算法的创新应用与实践（代码示例）
  • flutter开发多端平台应用的探索 上（基本操作）
  • Vue+Element多套主题切换
  • MLLM（一）| 文/图生视频任务大升级，BigModel 开源了视频模型CogVideoX
  • mysql开启远程访问
  • TCP/IP网络编程：第18章聊天室
  • 面向GPU计算平台的归约算法的性能优化研究
  • Rust 中 `madvise` 和 `posix_fadvise`的区别
  • python文件自动化（4）
  • 了解一下HTTP 与 HTTPS 的区别
  • FP7195：非同步升压恒流LED区动IC
  • C#实战|大乐透选号器[3]:动态生成大乐透蓝球区选择球及实现拖动窗体功能
  • Flask+LayUI开发手记（六）：树型表格的增删改查
  • 网络编程 0905作业
  • 在ABAP开发中，BSEG和BKPF的数据如何做关联查询？
  • Unity(2022.3.41LTS) - UI详细介绍-TMP
  • WordPress的安装与简单开发教程