3d变换

最新推荐文章于 2022-11-27 15:41:47 发布
最新推荐文章于 2022-11-27 15:41:47 发布
阅读量188 收藏 1
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40052011/article/details/103404712
版权

CSS 属性 perspective指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。 z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定。
三维元素在观察者后面的部分不会绘制出来，即 z 轴坐标值大于 perspective 属性值的部分。
默认情况下，消失点位于元素的中心，但是可以通过设置 perspective-origin 属性来改变其位置。

perspective-origin:50% 50%; /*默认值*/
perspective-origin:left top;  /*景深基点在左上角*/

当该属性值不为 0 和 none 时，会创建新的 层叠上下文。在这种情况下，容器内元素的层叠关系像是使用了 position: fixed 一样。

景深作用：让3d场景有近大远小的效果，肉眼距离显示器的距离，景深越大，元素离我们越远，效果就不好。在css3中，perspective用于激活一个3d空间。
景深不可继承，他作用于后代元素，
perspective:100px; //这个属性必须在包裹器上
transform:perspective(100px) //这样写是作用于元素本身，要用这个函数必须放在首位（所以一般不hi用这个函数）
景深原理：控制灭点的位置。景深越大，灭点越远，元素变形越小。
灭点：指的是立体图形各条便的延伸线所产生的相交点
景深叠加：尽量避免景深叠加

  • 3d旋转：
transform:rotate3d(1,0,0,angle) /*绕X轴旋转*/
transform:rotate3d(1,1,0,angle) /*绕Y=X轴旋转*/
......
  • 3d平移：
	    transform: translateZ(100px)  //z轴不能使用百分比
		transform: translate3d(10px,10px,10px)
  • 3d缩放：
		        scaleZ(2)  //单独使用时没作用
				transform:translateZ(30px)  scaleZ(2);  /*往前走了30px,*/
				transform: scaleZ(2) translateZ(30px); /*往前走了60px,*/
  • CSS 属性 transform-style 设置元素的子元素是位于 3D 空间中还是平面中。
transform-style: preserve-3d; /*营造有层级的舞台，不可继承，作用于子元素*/
	

  •  		backface-visibility: hidden; /*隐藏背面*/
  • 3d坐标轴

在这里插入图片描述

立方体：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>立方体</title>
		<!--
		把盒子摆在上下左右前后几个位置，再想办法进行3d转换
		
		-->
		<style type="text/css">
			#wrap{
				width: 300px;
				height: 300px;
				border: 1px solid black;
				background: url(bg.png) no-repeat;
				background-size: 100% 100%;
				perspective: 200px;/*景深*/
			}
			#wrap > .box{
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				width: 100px;
				height: 100px;
				
				transition: 3s;
				transform-style: preserve-3d;/*3d舞台,给div层级*/
				transform-origin: center center -50px; 
				
			}
			#wrap > .box > div{
				position: absolute;
				width: 100px;
				height: 100px;
				font: 50px/100px "微软雅黑";
				text-align: center;
				
				background-color: rgba(123,234,123,.3);
				backface-visibility: hidden; /*隐藏背面*/
			}
			/*上*/
			#wrap > .box >div:nth-child(5){
				top: -100px;  /*正值往里，负值往外*/
				transform: rotateX(90deg);
				transform-origin: bottom;
			}
			/*下*/
			#wrap > .box >div:nth-child(6){
				bottom: -100px;
				transform: rotateX(-90deg);
				transform-origin: top;
			}
			/*左*/
			#wrap > .box >div:nth-child(3){
				left: -100px;
				transform: rotateY(-90deg);
				transform-origin: right;
			}
			/*右*/
			#wrap > .box >div:nth-child(4){
				right: -100px;
				transform: rotateY(90deg);
				transform-origin: left;
			}
			/*后*/
			#wrap > .box >div:nth-child(2){
				transform: translateZ(-100px) rotateX(180deg);
			}
			/*前*/
			#wrap >.box >div:nth-child(1){
				z-index: 1;
			}
			
			#wrap:hover .box{
				transform: rotate3d(1,2,3,360deg);
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="box">
				<div>前</div>
				<div>后</div>
				<div>左</div>
				<div>右</div>
				<div>上</div>
				<div>下</div>
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

立方体2：（设置统一的基点，通过旋转构造立方体）（关键：找中心点）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>立方体</title>
		<!--
		
		
		-->
		<style type="text/css">
			#wrap{
				width: 300px;
				height: 300px;
				border: 1px solid black;
				perspective: 200px;/*景深*/
			}
			#wrap > .box{
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				width: 100px;
				height: 100px;
				
				transition: 3s;
				transform-style: preserve-3d;/*3d舞台,给div层级*/
				transform-origin: center center -50px; 
			}
			#wrap > .box > div{
				position: absolute;
				width: 100px;
				height: 100px;
				font: 50px/100px "微软雅黑";
				text-align: center;
                background-color: rgba(123,233,123,.3);		
						
				transform-origin: center center -50px;
			}
			/*上*/
			#wrap > .box >div:nth-child(5){
				transform: rotateX(90deg);
			}
			/*下*/
			#wrap > .box >div:nth-child(6){
				transform: rotateX(-90deg);
			}
			/*左*/
			#wrap > .box >div:nth-child(3){
				transform: rotateY(-90deg);
			}
			/*右*/
			#wrap > .box >div:nth-child(4){
				transform: rotateY(90deg);
			}
			/*后*/
			#wrap > .box >div:nth-child(2){
				transform: rotateX(180deg);
			}
			/*前*/
			#wrap >.box >div:nth-child(1){
				z-index: 1;
			}
			
			#wrap:hover .box{
				transform: rotateX(360deg);
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="box">
				<div>前</div>
				<div>后</div>
				<div>左</div>
				<div>右</div>
				<div>上</div>
				<div>下</div>
			</div>
		</div>
	</body>
</html>

在这里插入图片描述（如果要隐藏背面设置backface-visibility:hidden）

三棱柱：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>三棱柱</title>
		
		<style type="text/css">
			#wrap{
				width: 300px;
				height: 300px;
				border: 1px solid black;
				perspective: 200px;/*景深*/
			}
			#wrap > .box{
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				width: 100px;
				height: 100px;
				
				transition: 3s;
				transform-style: preserve-3d;/*3d舞台,给div层级*/
			}
			#wrap > .box > div{
				position: absolute;
				width: 100px;
				height: 100px;
				font: 50px/100px "微软雅黑";
				text-align: center;
                background-color: rgba(123,233,123,.3);		
						
				transform-origin: center center -28.867513459481287px;/*计算中心点的位置*/
			}
			
			/*左*/
			#wrap > .box >div:nth-child(2){
				transform: rotateY(-120deg);
			}
			/*右*/
			#wrap > .box >div:nth-child(3){
				transform: rotateY(120deg);
			}
			/*前*/
			#wrap >.box >div:nth-child(1){
				z-index: 1;
				background-color: pink;
			}
			
			#wrap:hover .box{
				transform: rotateY(180deg);
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="box">
				<div>前</div>
				<div>左</div>
				<div>右</div>
			</div>
		</div>
	</body>
</html>

在这里插入图片描述多棱柱画法：
关键：
1.第n个面旋转度数：外角度数*n
2.找到内角度数，棱长，通过三角函数求中心点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>多棱柱</title>
		
		<style type="text/css">
			#wrap{
				width: 300px;
				height: 300px;
				border: 1px solid black;
				perspective: 10000px;/*景深*/
				
			}
			#wrap > .box{
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				width: 100px;
				height: 100px;
				
				transition: 3s;
				transform-style: preserve-3d;/*3d舞台,给div层级*/
			}
			#wrap > .box > div{
				position: absolute;
				width: 100px;
				height: 100px;
				font: 50px/100px "微软雅黑";
				text-align: center;
                background-color: rgba(123,233,123,.3);		
					
			}
			
			
			#wrap:hover .box{
				transform: rotateX(360deg);
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="box">
			</div>
		</div>
		<script type="text/javascript">
			window.onload = function(){
				
				
				createLZ(6)
				function createLZ(n){//n棱柱
				    var boxNode = document.querySelector("#wrap > .box")
				    var styleNode = document.createElement("style")
				    var text = ""
				    var cssText = ""
				    var degIn = 180 - 360/n  //n棱柱内角
					var degOut = 360/n  //n棱柱外角
					for (var i = 0;i<n ;i++) {
						text += "<div>"+(i+1)+"</div>"
						cssText += "#wrap>.box>div:nth-child("+(i+1)+"){transform:rotateY("+(degOut*i)+"deg);}"
					}
					
					boxNode.innerHTML = text
					
					var divNode = document.querySelector("#wrap > .box>div")
					var length =divNode.offsetWidth //棱长
					cssText+="#wrap>.box{transform-origin:center center -"+(length/2*Math.tan(degIn/2*Math.PI/180))+"px;}"
					cssText+="#wrap>.box>div{transform-origin:center center -"+(length/2*Math.tan(degIn/2*Math.PI/180))+"px;}"
					
					
					styleNode.innerHTML = cssText
					document.head.appendChild(styleNode)
					
					
				}
					
			}
		</script>
	</body>
</html>

在这里插入图片描述在这里插入图片描述

你真好看l
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
计算机视觉 图像形成 几何图形和变换 3D变换
学以致用 知行合一
05-23 621
​2D和3D坐标转换之间的最大区别在于3D旋转矩阵的参数化并不直接，因为存在几种不同的可能性。
3D变换
Schrodinge的博客
05-02 245
3D变换 1.transform之3d移动变换: transform:translate3d(x,y,z) z:代表在垂直于平面的轴上移动，电脑屏幕往人眼那个方向为正方向。 transform:translateZ(z) 2.transform-style规定变换的样式（父元素） 属性值：flag平面（默认） preserve-3d保持3d变换 transform-style: preser...
s3产品信息3D变换.rar_s3产品信息3D变换
09-24
在IT领域，尤其是在Web开发中，3D变换是一种强大的技术，可以为网页元素带来丰富的动态效果，提升用户体验。本主题围绕“s3产品信息3D变换”展开，主要涉及CSS3中的3D变换、图片翻转效果以及jQuery的变换应用。 CSS...
javascript实现3D变换的立体圆圈实例
10-23
在本文中，我们将深入探讨如何使用JavaScript实现一个3D变换的立体圆圈效果，这是一个动态的、具有视觉吸引力的网页元素。这个实例主要关注了两个核心概念：3D变换和颜色动态变化。 首先，3D变换在JavaScript中通常...
3d变换效果
04-04
该源码项目是一款比较常见的一种3d变换效果案例，源码AndroidIndicators，为app的title增加左右、上下、3d变换（Transition）效果，并且源码也比较容易上手的，希望大家喜欢。
3D变换的特效
12-17
3D变换的特效-----Rotate3dAnimation 可以参考http://blog.163.com/benben_long/blog/static/19945824320141117443156/
WPF 3D 变换源码.rar
02-22
《深入理解WPF 3D变换：源码分析与应用》 WPF（Windows Presentation Foundation）作为.NET Framework的一部分，提供了强大的3D图形渲染能力。在本资料中，我们重点探讨的是一份名为“WPF 3D 变换源码”的压缩包，...
3D变换、、
m0_60376759的博客
04-12 97
transform-style 指定某元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。 flat： (默认)指定子元素位于此元素所在平面内 preserve-3d： 指定子元素定位在三维空间内 决定一个变换元素看起来是处在三维空间还是平面内，需要该元素的父元素上定义 transform-style 属性。 perspective 景深，指定观察者与「z=0」平面的距离，使具有三维位置变换的元素产生透视效果。 none： 不指定透视 （默认值） .
计算机图形学(三) -- 3D 变换
最新发布
Osenberg WS
11-27 1534
其中，α,β,γα,β,γ分别代表绕 X Y Z 三个轴旋转的角度，叫做欧拉角pitch 是围绕 X 轴旋转，也叫做俯仰角yaw 是围绕 Y 轴旋转，也叫偏航角roll 是围绕 Z 轴旋转，也叫翻滚角思考怎么拍一张照片？找到一个合适的地方并且排列好拍照的人 (模型变换 Model Transformation)找到一个合适的拍照角度放置相机 (视图变换 View Transformation)
transform 3D 变换
zmooooo的博客
12-10 2961
(一 ) 3D transform中有三个方法         1、rotateX(45deg);         2、rotateY(45deg);         3、rotateZ(45deg);         (二)  perspective属性         perspective的中文意思是透视，视角!         1、我们都知道近大远小的道理，对于没有rotate
CSS之3D变换
yan_yuanfeng的博客
09-03 651
CSS之3D变换： 首先要理解3D和2D的区别，有什么特点，下面我先介绍下我对3D变换的理解： 1、坐标系上3D是有3个坐标轴XYZ。 2、同样的物体根据距离眼睛的距离不同看上去的效果会不一样的大小。 3、从不同的角度看（上面，下面、左边等各个方位都会有不一样的效果 接下来，我就一个旋转螺旋体作为例子来说下3D的变换。 1、在上代码之前先简单说下旋3D变换所需要的结构：
3d变换(Css)(笔记)
qq_45076209的博客
01-22 122
3d变换(Css) 变换基点 transform:rotate(45deg) /*中心旋转45度*/ transform-origin： ​ top center left right bottom ​ 百分比 百分比时，第一个值为从左到右，第二个值为从上到下 例： transform-origin: 100% 50% 表示的位置是一个盒子的最右边的中点 若只给一个值，另一个默认为中心点 3d知识点 创造一个3d物体或展示一个物体在三维空间运动，基础条件就是创建一个3维坐标
CSS3之 3D变换、3D动画
努力，追梦的博客
05-03 1472
CSS3之 3D变换、3D动画 3D变换 transform-style（preserve-3d） 建立3D空间 Perspective 景深（类似于站在多远地方看） Transform 新增函数   1)  rotateX()   .box{width:100px;height:100px;padding:100px;border:5pxsolid #000;margin:3
2、计算机图形学——3D变换
Master Cui的博客
07-29 1292
1.1、3D点和向量的齐次坐标表示 根据1中的第二部分齐次坐标可知，3D点的齐次坐标可表示为 1.2、3D仿射变换的一般形式 根据1中的第三部分变换的组合可知，3D点的仿射变换的齐次坐标方程可表示为 1.3、3D缩放 根据1中的2D线性变换中的缩放变换可类推3D的缩放变换的齐次坐标为 1.4、3D平移 根据1中的2D变换中的平移变换可类推3D的平移变换的齐次坐标为 1.4、3D旋转变换 3D旋转变换与2D旋转略有不同，2D旋转只是绕着原点进行逆时针旋转，而3D空
3D变换(二十二）
unlockmyname的博客
07-05 547
3D变换(transform3D) ##坐标轴 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EJpnbFui-1625458830250)(D:/JAVA/WEB%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%96%99%EF%BC%88%E5%85%A8%E5%A5%97%EF%BC%89/%E4%BA%8C%E5%8D%81%E4%B8%83/%E8%AF%BE%E4%BB%B6%E7%AC%94%E8%AE%B0/as

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值