学习了3D写两个小案例

最新推荐文章于 2024-06-12 22:18:06 发布

m0_64962776

最新推荐文章于 2024-06-12 22:18:06 发布

阅读量81

点赞数

文章标签：学习 3d html

本文链接：https://blog.csdn.net/m0_64962776/article/details/124752138

版权

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

.nav{

margin: 200px;

}

ul{

list-style: none;

}

a{

text-decoration: none;

}

ul li{

/* 添加一个透视效果 */

perspective: 1200px;

float: left;

margin-right: 20px;

text-align: center;

line-height: 50px;

}

ul li a{

/* 开启3d效果,父级盒子开启 */

transform-style: preserve-3d;

position: relative;

display: block;

width: 200px;

height: 50px;

color: #fff;

font-size: 30px;

/* 添加透视效果 */

/* perspective: 800px; */

/* 添加过度效果 */

transition: all 1s;

color: #000;

}

ul li a:hover{

/* 把a旋转起来负数是从上往下旋转*/

transform: rotateX(-90deg);

}

ul li a span{

/* 使用定位然后让盒子重叠到一起，定位到自己的父级元素的a里面,不过加了定位之后就相当于是个行内块元素了下面的转换元素就不要了 */

position: absolute;

top: 0;

left: 0;

/* 先转成快元素然后设置宽高 */

/* display: block; */

width: 100%;

height: 100%;

}

ul li a span:first-child{

/* 首先吧这个盒子往前移动移动高度的一般 */

transform: translateZ(25px);

background-color: aqua;

}

ul li a span:last-child{

background-color: red;

/* 跟后面的盒子转一下,让盒子面在上面然后在网上移动到顶部 (先移动再旋转)*/

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

}

</style>

</head>

<body>

<div class="nav">

<ul>

<li>

<a href="">

<span>首页</span>

<span>index</span>

</a>

</li>

<li>

<a href="">

<span>首页</span>

<span>index</span>

</a>

</li>

<li>

<a href="">

<span>首页</span>

<span>index</span>

</a>

</li>

</ul>

</div>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

.box{

position: relative;

margin: 100px auto;

width: 300px;

height: 300px;

background-color: red;

/* 开启透视效果 */

perspective: 800px;

/* 开启过渡时间 */

transition: all 2000s;

/* 开启3d效果 */

transform-style: preserve-3d;

}

.box>div{

/* 定位让三个盒子一样大，然后在一起重叠 */

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

width: 100%;

height: 100%;

}

.box .box1{

background-color: aqua;

/* 盒子向前移动100px */

transform: translateZ(100px);

}

.box .box2{

/* 盒子向后移动100像素移出父盒子 */

/* 用3d效果显示出来父盒子 */

transform: translateZ(-100px);

background-color: darkgoldenrod;

}

.box:hover{

/* 开启左右旋转 */

transform: rotateY(10000turn);

}

</style>

</head>

<body>



<div class="box">

<div class="box1">钱</div>

<div class="box2">后</div>

</div>

</body>

</html>