空间转换

空间转换属性: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之间的数字

左手法则

判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

x轴旋转方向判断

x轴旋转方向判断

<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

视距及z轴位移图

作用

空间转换时,为元素添加近大远小、近实远虚的视觉效果

立体呈现

perspective只增加近大远小、近实远虚的视觉效果。不能呈现立体图形。这时可以使用transform-style: preserve-3d呈现立体图形

呈现立体图形步骤

  1. 盒子父元素添加transform-style: preserve-3d;使子元素处于真正的3d空间。(默认flat,子元素不处在真正的3d空间)

  2. 按需求设置子盒子的位置(位移或旋转)

  3. 父盒子设置空间旋转可看到透视效果

    注意:空间内,转换元素都有自已独立的坐标轴,互不干扰

    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;
}
posted @   丫丫learning  阅读(281)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
点击右上角即可分享
微信分享提示