空间转换
空间转换属性:transform,也叫3D转换。使用transform属性可以实现元素在空间内的位移、旋转、缩放等效果
空间:是从坐标轴角度定义的。x 、y 和z三条坐标轴构成了一个立体空间,z轴位置与视线方向相同。
空间位移
语法
- transform: translate3d(x, y, z);
- transform: translateX(值);
- transform: translateY(值);
- transform: translateZ(值);
取值
- 像素单位数值
- 百分比:参照自身宽高
<div class="box">perspective</div>
body { /* 视距:人的眼睛到屏幕的距离 一般在800px – 1200px */ perspective: 500px; } .box { width: 200px; height: 200px; margin: 100px auto; background-color: #ccc; border: 1px solid #000; transition: all 1s; } .box:hover { /* translate: 百分比:参照自身宽高; translateZ:百分比无反应,原因:盒子是平面图,无厚度可参考 */ transform: translateX(100px); transform: translateY(100px); transform: translateZ(100px); transform: translate3d(100px, 100px, 100px); }
空间旋转
语法
-
transform: rotateZ(值);
-
transform: rotateX(值);
-
transform: rotateY(值);
拓展:连写
- rotate3d(x, y, z, 角度度数) :用来设置自定义旋转轴的位置及旋转的角度
- x,y,z 取值为0-1之间的数字
左手法则
判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
<img src="./images/hero.jpeg" alt="">
body { /* 视距,使子元素具有3d转换效果 */ perspective: 800px; } img { display: block; margin: 100px auto; transition: all 1s; } img:hover { transform: rotateX(90deg); transform: rotateY(90deg); transform: rotateZ(90deg); }
空间缩放
语法:
- transform: scaleX(倍数);
- transform: scaleY(倍数);
- transform: scaleZ(倍数);
- transform: scale3d(x, y, z);
<div class="box"> <div class="father"> <span>1</span> <span>2</span> </div> </div>
.box { width: 300px; height: 300px; margin: 100px auto; } .father { position: relative; width: 100px; height: 100px; background-color: #ccc; transform-style: preserve-3d; transform: rotate3d(1, 1, 0, 50deg); transition: all 1s; } .father:hover { transform: rotate3d(1, 1, 0, 50deg) scale3d(1.2,1.2,1.2); } .father>span { position: absolute; display: block; width: 100px; height: 100px; } span:nth-child(1) { background-color: pink; transform: translateY(-50px) rotateX(90deg); } span:nth-child(2) { background-color: skyblue; transform: translateZ(50px); }
扩展
透视
Z轴是视线方向,移动效果应该是距离的远或近, 电脑屏幕是平面,默认无法观察远近效果,这时使用perspective属性实现近大远小、近清楚远模糊透视效果
语法
- perspective: 值;
需要添加给父级
取值:像素单位数值, 一般在800px – 1200px。
透视距离也称为视距,所谓的视距就是人的眼睛到屏幕的距离。
左面的图:z>0,右边的图z<0
作用
空间转换时,为元素添加近大远小、近实远虚的视觉效果
立体呈现
perspective只增加近大远小、近实远虚的视觉效果。不能呈现立体图形。这时可以使用transform-style: preserve-3d呈现立体图形
呈现立体图形步骤
-
盒子父元素添加transform-style: preserve-3d;使子元素处于真正的3d空间。(默认flat,子元素不处在真正的3d空间)
-
按需求设置子盒子的位置(位移或旋转)
-
父盒子设置空间旋转可看到透视效果
注意:空间内,转换元素都有自已独立的坐标轴,互不干扰
perspective与transform-style使用场景:
- 一个标签需要透视,在父元素加视距:perspective
- 多个盒子需要透视,在父元素添加transform-style: preserve-3d;使里面的子元素处在真正的3d空间
<div class="box"> <div class="front"></div> <div class="back"></div> </div>
.box { position: relative; width: 300px; height: 300px; border: 1px solid #000; margin: 100px auto; transform-style: preserve-3d; transition: all 1s; } .box:hover { transform: rotateY(180deg); } .box>div { position: absolute; width: 100%; height: 100%; } .front { background-color: orange; transform: translateZ(-300px); } .back { background-color: green; }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性