前端Css3新特性之3D空间转换语法

Her...

已于 2023-02-23 20:22:17 修改

阅读量138

点赞数 1

分类专栏： CSS 文章标签： 3d css3 前端 css html

于 2022-10-24 14:45:00 首次发布

本文链接：https://blog.csdn.net/weixin_48082900/article/details/127406706

版权

CSS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1.三个轴的取值正反：

X 轴往右越大，是正值，否则反之

Y 轴往下越大，是正值，否则反之

Z轴（指向我们）越大，是正值，否则反之

2.3D位移

语法：

transform: translate3d(x, y, z);

也可以分开写：

transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(100px);

3.3D旋转

语法：

transform: rotateX(-90deg);

单位：deg(角度）、turn（圈) 1turn=360deg

（1）rotateX 上下旋转

（2）rotateY 左右旋转

在透视的加持，3d旋转效果才会比较明显

透视的作用：空间转换时，为元素添加近大远小、近实远虚的视觉效果

透视 perspective 注意事项：

1.取值范围大概在 800px ~ 1200px 之间

2.给元素的父级添加

tips：缩放 scale、倾斜 skew 和2D一样，就不在此赘述了

详细了解可以参考我的另一篇博客：https://mp.csdn.net/mp_blog/creation/editor/127405037

4.开启3D效果

语法：

transform-style: preserve-3d;

5.导航栏翻转demo参考代码：

<style>

* {

margin: 0;

padding: 0;

}

.nav {

width: 800px;

margin: 200px auto;

list-style: none;

}

.nav li {

position: relative;

float: left;

margin-right: 20px;

width: 120px;

height: 50px;

}

.nav li a {

/* 扩大选择范围 */

display: block;

/* 开启3d空间 */

transform-style: preserve-3d;

text-decoration: none;

height: 100%;

width: 100%;

transition: all 1s;

}

/* 鼠标悬停后li从上往下旋转90度 */

.nav li a:hover {

transform: rotateX(-90deg);

}

.nav a span {

position: absolute;

top: 0;

left: 0;

height: 100%;

width: 100%;

color: #fff;

text-align: center;

line-height: 50px;

}

/* 绿色盒子要到前面来 */

.nav a span:first-child {

background-color: green;

transform: translateZ(25px);

}

/* 橙色盒子在旋转前是垂直状态,从下往上旋转90度后卡在绿色盒子中间,再向上移自己宽度的一半 */

.nav a span:last-child {

background-color: orange;

transform: translateY(-25px) rotateX(90deg);

}

</style>

<body>

<ul class="nav">

<li>

<a href="#">

首页

index

</a>

</li>

<li>

<a href="#">

首页

index

</a>

</li>

<li>

<a href="#">

首页

index

</a>

</li>

</ul>

</body>