首页 / 知识

HTML与CSS中的3D转换模块

2023-04-11 15:16:00

　　文中的img标签![](images/jacky/xin.webp)全部变成了macdown格式
 
　　一.什么是2D和3D
 
　　1.什么是2D和3D
 
　　2D就是一个平面,只有宽度和高度,没有厚度
 
　　3D就是一个立体,有宽度和高度,还有厚度
 
　　默认情况下所有的元素都是呈2D展现的
 
　　2.如何让某个元素呈3D展现
 
　　和透视一样,想看到某个元素的3d效果,只需要给他的父元素添加一个transform-style属性,然后设置为preserve-3d即可
 
　　3.transform-style的取值:
 
　　flat:默认取值,二维的;
 
　　preserve-3d:3D效果;
 
　　<htmllang="en"><head><metacharset="UTF-8"><title>106-3D转换模块</title><style>
 
　　*{margin:0;padding:0;}
 
　　.father{width:200px;height:200px;
 
　　background-color:red;border:1pxsolid#000;margin:100pxauto;
 
　　perspective:500px;transform-style:preserve-3d;
 
　　transform:rotateY(0deg);
 
　　}.son{width:100px;height:100px;background-color:blue;border:1pxsolid#000;margin:0auto;margin-top:50px;transform:rotateY(45deg);}</style></head><body><pclass="father"><pclass="son"></p></p></body></html>
 
　　二.正方体(有瑕疵,页面文字显示有问题)
 
　　<htmllang="en"><head><metacharset="UTF-8"><title>107-3D转换模块-正方体</title><style>*{margin:0;padding:0;}ul{width:200px;height:200px;border:1pxsolid#000;box-sizing:border-box;margin:100pxauto;position:relative;transform:rotateY(0deg)rotateX(0deg);transform-style:preserve-3d;}ulli{list-style:none;width:200px;height:200px;font-size:60px;text-align:center;line-height:200px;position:absolute;left:0;top:0;}ulli:nth-child(1){background-color:red;transform:translateX(-100px)rotateY(90deg);}ulli:nth-child(2){background-color:green;transform:translateX(100px)rotateY(90deg);}ulli:nth-child(3){background-color:blue;transform:translateY(-100px)rotateX(90deg);}ulli:nth-child(4){background-color:yellow;transform:translateY(100px)rotateX(90deg);}ulli:nth-child(5){background-color:purple;transform:translateZ(-100px);}ulli:nth-child(6){background-color:pink;transform:translateZ(100px);}</style></head><body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul></body></html>
 
　　1.webp
 
　　正方体(有瑕疵,仅供了解)
 
　　三.正方体(终极方案)
 
　　旋转90度后,坐标系也跟着旋转了90度,故应该沿着z轴移动;
 
　　立体效果攻略:先旋转一定的度数,再沿z轴平移
 
　　<htmllang="en"><head><metacharset="UTF-8"><title>108-3D转换模块-正方体终极</title><style>*{margin:0;padding:0;}ul{width:200px;height:200px;border:1pxsolid#000;box-sizing:border-box;margin:100pxauto;position:relative;transform:rotateY(0deg)rotateX(0deg);transform-style:preserve-3d;}ulli{list-style:none;width:200px;height:200px;font-size:60px;text-align:center;line-height:200px;position:absolute;left:0;top:0;}
 
　　ulli:nth-child(1){background-color:red;transform:rotateX(90deg)translateZ(100px);}
 
　　ulli:nth-child(2){background-color:green;transform:rotateX(180deg)translateZ(100px);}ulli:nth-child(3){background-color:blue;transform:rotateX(270deg)translateZ(100px);}ulli:nth-child(4){background-color:yellow;transform:rotateX(360deg)translateZ(100px);}ulli:nth-child(5){background-color:purple;transform:translateX(-100px)rotateY(90deg);}ulli:nth-child(6){background-color:pink;transform:translateX(100px)rotateY(90deg);}</style></head><body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul></body></html>






本文转载自中文网

模块转换3d2D元素平面

最新内容

相关内容

热门文章

推荐文章

标签云

猜你喜欢