HTML-CSS（四十二）transfrom3D相关属性

最新推荐文章于 2024-03-31 23:49:02 发布
最新推荐文章于 2024-03-31 23:49:02 发布
阅读量327 收藏 2
点赞数
分类专栏： HTML css3 CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44730244/article/details/116321456
版权
HTML 同时被 3 个专栏收录
67 篇文章 2 订阅
订阅专栏
CSS
65 篇文章 3 订阅
订阅专栏
css3
30 篇文章 1 订阅
订阅专栏

3d属性

rotateX():正值向上

rotateY（）；正值向右

translateZ():政治向前，负值向后

注意：translateZ值不要超过景深（下文提到），否则效果不会很好。还有就是元素不是放大了，只不过物体离你更近

scaleZ（）:立体元素的厚度
更改之前：
在这里插入图片描述
更改之后：
在这里插入图片描述

3d写法：

scale3d（）:三个值x y z

translate3d（）：三个值 x y z

rotate3d():四个值0|1（x轴是否添加旋转角度）0|1（y轴是否添加旋转角度）0|1（z轴是否添加旋转角度）deg

transform: rotate3d(1,1,1,30deg);都旋转30deg

注意事项

可能会好奇复合写法跟这个不就是一样的吗不是的。首先，

transform：scale(x,y)没有z。只填一个值时scaleX和scaleY放大倍数一样

transform：translate（x,y）z无效，只填一个值相当于transform：translateX（）没有y

transform：rotate（numberdeg）只能填一个值 等价于transfrom：rotateZ（）

3d扩展

perspective:里屏幕多远的距离去观察元素，值越大幅度越小,视觉感觉越差，越是接近2d效果。3d效果呈现主要是越是前面越清晰。
prspective:100px
在这里插入图片描述
prespective:500px
在这里插入图片描述
perspective-orgin：景深-基点位置，观察元素的角度

用在3d视角观察元素变化。
perspective-orgin：x（number（px）、单词） 、y（number（px）、单词）。
为什么没有z呢，因为景深就是z了
未更改观测点的样子
在这里插入图片描述
改变观测点之后的样子（presepctive:center top）
在这里插入图片描述
transform-orgin：x y z 变化的基点。

transform-style:3D控件

形成一个3d视角，正常情况下，如果我们观察一个立方旋转，在2d角度下观察就是一个平面。而将transform-style：preserve-3d之后，就会形成一个前后左右的空间，就是一个完整的立方体的样子
属性值：flat（默认值2d）、preserve-3d(3d，产生一个三维空间)

backface-visibility：背面隐藏
属性值 ：hidden、visible（默认值）

练习

练习1：立方体
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 400px;
				height: 400px;
				border: 1px dashed black;
				margin: 0 auto;
				position: relative;
				/* 这个可以在做布局的时候添加下面的样式，这样就会在middle形成一个空间感，
				你就可以看到你对每个方块摆放位置的变化 */
				perspective: 400px;
				/* 改变观测点你就知道自己有没有将方块摆放正确啦 */
				/* perspective-origin: center top; */
			}
			.middle{
				/* 3d效果 形成一个前后左右一个立体空间，否则旋转的时候也只是一块板在转*/
				transform-style: preserve-3d;
				transform-origin: center center 0;
				width: 200px;
				height: 200px;
				border: 1px dotted black;
				position: relative;
				margin: 100px 100px;
				animation: 10s ease infinite move;
			}
			@keyframes  move{
				%0{
					transform: rotate(0deg);
					/* transform: rotateX(360deg); */
				}
				25%{
					transform: rotateX(360deg);
					/* transform: rotateX(360deg); */
				}
				55%{
					transform: rotateY(-360deg);
					/* transform: rotateX(360deg); */
				}
				100%{
					transform: rotate(0deg);
				}
				
			}
			.z{
				width: 200px;
				height: 200px;
				background-color: rgba(100,100,100,0.1);
				position: absolute;
				line-height: 200px;
				text-align: center;
				font-size: 30px;
				font-weight: bold;
				color: black;
				/* backface-visibility:hidden; */
			}
			.box3{
				transform: translateZ(-100px);
			}
			.box1{
				transform: translateZ(100px);
			}
			.box2{
				transform: translateX(-100px) rotateY(90deg);
			}
			.box4{
				transform: translateX(100px) rotateY(-90deg);
			}
			.box5{
				transform: translateY(100px) rotateX(-90deg);
			}
			.box6{
				transform: translateY(-100px) rotateX(90deg);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="middle">
				<div class="box1 z">1</div>
				<div class="box2 z">2</div>
				<div class="box3 z">3</div>
				<div class="box4 z">4</div>
				<div class="box5 z">5</div>
				<div class="box6 z">6</div>
			</div>
			
		</div>
	</body>
</html>

练习2：图片旋转-旋转木马
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 400px;
				height: 400px;
				border: 1px pink solid;
				position: relative;
				margin: 0 auto;
				perspective: 400px;
				perspective-origin: center center; 
			}
			.image{
				margin: 100px;
				width: 200px;
				transition: 3s ease all;
				position: relative;
				transform-style: preserve-3d;
			}
			.image div{
				transition: 1s ease all;
			}
			.box div{
				position: absolute;
				
			}
			
			.box:hover .image1{
				transform: rotateY(180deg);
			}
			.box:hover .image2{
				transform: rotateY(180deg)
			}
			.box img{
				width: 200px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="image">
				<div class="image1"><img src="../img/7a7caf3b3bf04ee992d17dde8ffd1c77.png" ></div>
				<div class="image2"><img src="../img/8e2add6daceb4be3ba60a250bf452262.jpg" ></div>
			</div>
			
		</div>
	</body>
</html>

练习三 练习3：图片翻转
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 400px;
				height: 400px;
				border: 1px pink solid;
				position: relative;
				margin: 0 auto;
				perspective: 400px;
				perspective-origin: center center; 
			}
			.image{
				margin: 100px;
				width: 200px;
				transition: 3s ease all;
				position: relative;
				transform-style: preserve-3d;
			}
			.image div{
				transition: 1s ease all;
			}
			.box div{
				position: absolute;
				
			}
			
			.box:hover .image1{
				transform: rotateY(180deg);
			}
			.box:hover .image2{
				transform: rotateY(180deg)
			}
			.box img{
				width: 200px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="image">
				<div class="image1"><img src="../img/7a7caf3b3bf04ee992d17dde8ffd1c77.png" ></div>
				<div class="image2"><img src="../img/8e2add6daceb4be3ba60a250bf452262.jpg" ></div>
			</div>
			
		</div>
	</body>
</html>

练习4：翻书效果
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 300px;
				height: 300px;
				border: 1px solid black;
				position: relative;
				margin: 0 auto;
				perspective: 00px;
				transform-style: preserve-3d;
				transform: rotateX(-60deg);
			}
			.top,.first,.second{
				
				box-sizing: border-box;
				width: 150px;
				height: 300px;
				position: absolute;
				text-align: center;
				line-height: 300px;
				border: 1px solid blue;
				margin-left: 150px;
				animation: 5s ease move ;
				transform-origin: left;
				animation-fill-mode: forwards;
			}
			.top{
				animation-delay: 0s;
				background-color: pink;
			}
			.first{
				animation-delay: 2s;
			}
			.second{
				animation-delay: 4s;
			}
			@keyframes move{
				from{
					transform: rotateY(0deg);
				}
				to{
					transform: rotateY(180deg);
				}
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="second">
				第二页
			</div>
			<div class="first">
				第一页
			</div>
			<div class="top">
			首页
			</div>
			
		</div>
	</body>
</html>
每天进步一大步
关注
专栏目录
css：transform的3D变换属性
YangLu888
04-10 975
css:transform的3D变换
HTML（二）transform属性
qq_38763173的博客
02-06 5286
transform属性一、translate属性与其他属性组合导致的特殊问题scale与translate组合rotate与translate组合skew与translate组合二、其他属性transform-origin 变换基点transform-stylebackface-visibilityperspective transform 有四个属性： 位移：translate(x,y)、t...
CSS3 translate3d 常用相关属性
annuobin1120的博客
10-14 308
transform: translate3d(300px, 0, 0) rotateY(-15deg) rotateX(-15deg) rotateZ(-15deg); x轴偏移300px xyz三个轴线各旋转-15度 rotateX 沿着屏幕横向轴旋转 rotateY 沿着屏幕竖直方向轴旋转 rotateZ 沿着屏幕垂直方向轴旋转 transform-style: preserve-3...
CSS3之transform属性-3D转换
杨筱斌的博客
12-18 1830
三维坐标系 x 轴：水平向右 – 注意：x轴右边是正值，左边是负值 y 轴：垂直向下 – 注意：y轴下面是正值，上面是负值 z 轴：垂直屏幕 – 注意：z轴往外是正值，往里是负值   3D旋转左手准则 左手的手拇指指向旋转轴的正方向 其余手指的弯曲方向就是该元素沿着该旋转轴旋转的方向（正值方向）   transform: 作用：   &nbsp...
css3之3D转换transform
最新发布
ldd_eb的博客
03-31 1012
黑马程序员pink老师等你
深入理解CSS变形transform(3d)
沐小侠
08-15 219
详细介绍关于transform变形3D的内容，但需以了解transform变形2D为基础。3D变形涉及的属性主要是transform-origin、transform、transform-style、perspective、perspective-origin、backface-visibility。 ...
CSS3中设置3D变形的transform-style属性详解
09-24
在使用preserve-3d属性值时，可以创建连续的3D空间效果，父元素的变换不会影响子元素的3D状态，让子元素能够响应自己的变换动画。 在实际应用中，transform-style属性需要被设置在父元素上，并且父元素必须是那些...
CSS3中的transform属性进行2D和3D变换的基本用法
09-24
CSS3中的transform属性是前端开发中用于元素变形的常用工具，它不仅能够实现二维（2D）空间的变换，还能完成三维（3D）空间的变换效果。在进行介绍之前，我们先要了解transform属性的基本概念和其作用。 首先，...
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
11-22
从而通过改变transform：rotate属性值来达到3d立方体旋转的效果 HTML代码块： <body> <input type="button" class="open" value="点击散开"/> <input type="text" class="xNum" value=""/>//X...
纯CSS实现旋转相册-3D旋转-悬停效果.html
04-18
这是一个使用纯CSS实现的旋转相册，通过CSS3的transform属性实现3D旋转和悬停效果。页面中包含一个div容器，其中包含多个img标签，每个img标签代表一个相册图片。通过设置容器的transform-style属性为preserve-3d，...
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
09-28
在本教程中，我们将探讨如何使用CSS3的`transform`属性和3D转换来创建一个动态3D立方体。这个立方体可以通过键盘上的上下左右键进行翻转和旋转，为用户带来炫酷的视觉体验。 首先，HTML结构是立方体的基础。在示例...
CSS -- CSS3中3D转换相关属性讲解（translate3d，rotate3d，perspective，transform-style）
Qlz的博客
12-22 4855
3D转换 1 三维坐标系 2 3D移动 translate3d 3 透视 perspective 4 3D 旋转 rotate3d 5 3D旋转 rotate3d 6 3D呈现 transform-style 7 3D案例 3D转换 我们生活的环境是3D的，照片就是3D物体在2D平面呈现的例子。 3D特点： 近大远小。 物体后面遮挡不可见 当我们在网页上构建3D效果的时候参考这些特点就能产出3D效果。 1 三维坐标系 三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。 x轴：水平向右 注意
transform 3D
秦璐璐的博客帝国
09-15 740
效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
空间（3D）转换：使用transform属性实现元素在空间内的位移、旋转、缩放等效果
weixin_47448904的博客
10-10 860
目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果。
transform属性
weixin_30322405的博客
12-14 116
transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜 transform属性---2D位置移动 1.translate(x,y) 定义： 基于原来的位置，沿X轴平移，长度为x，沿Y轴平移，长度为y 语法： transform：translate(x,y); ...
CSS3的transform之3d转换、CSS3动画
m0_46324704的博客
07-18 2591
transform的3d转换和动画的基本使用方法
运用transforrm呈现3D旋转效果
weixin_50256767的博客
09-06 143
【代码】运用运用transforrm呈现3D旋转效果。
32.三维转换属性
potato123232的博客
04-07 1428
三维在网页中显示出来有两个特点 近大远小 被遮挡后不可见 三维转换有四个常用属性，3D位移(translate3d)，3D旋转(rotate3d)，透视(perspective)，3D呈现(transfrom-style) 与二维转换相同，由于转换的属性名都为transform，所以无论写多少transform只有最后的语句生效，写一个二维的再写一个三维的，也是只有最后的语句生效 目录 1三维坐标系 2透视 perspective 3三维移动 translate3d 4三维旋........
CSS基础：新属性3D的转换，以及案例演示
u011863822的博客
03-23 1880
CSS3新特性之3D转换，以及透视，3D呈现 transfrom-style
CSS3 Transform动画属性详解与浏览器兼容指南
CSS3中的Transform动画属性是CSS3新增的重要功能，它扩展了网页布局和视觉效果的表达能力，通过transform、transition和animation三个核心动画属性，开发者能够实现各种动态和交互式的视觉效果。然而，由于它们是新...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值