当前位置:首页 / 网页制作 / HTML/Xhtml教程 / HTML与CSS中的3D转换模块介绍
HTML与CSS中的3D转换模块介绍
芯晴素材特效 分类:HTML/Xhtml教程 发布日期:2018-04-15

这次给大家带来HTML与CSS中的3D转换模块,使用HTML与CSS中的3D转换模块注意事项有哪些,下面就是实战案例,一起来看一下。

文中的img标签![](images/jacky/xin.png) 全部变成了macdown格式

一. 什么是2D和3D

1.什么是2D和3D

2D就是一个平面, 只有宽度和高度, 没有厚度

3D就是一个立体, 有宽度和高度, 还有厚度

默认情况下所有的元素都是呈2D展现的

2.如何让某个元素呈3D展现

和透视一样, 想看到某个元素的3d效果, 只需要给他的父元素添加一个transform-style属性, 然后设置为preserve-3d即可

3.transform-style的取值:

flat:默认取值,二维的;

preserve-3d:3D效果;

1 2 3 4 5 6 7<html  lang="en">  <head>     <meta charset="UTF-8">      <title>106-3D转换模块</title>     <style>          *{              margin: 0;             padding: 0;         }                  .father{              width: 200px;             height: 200px;                      background-color:  red;             border: 1px solid #000;             margin: 100px  auto;                       perspective:  500px;             transform-style: preserve-3d;                       transform:  rotateY(0deg);                                }          .son{             width: 100px;             height: 100px;              background-color: blue;             border: 1px solid #000;             margin:  0 auto;             margin-top: 50px;             transform:  rotateY(45deg);         }     </style> </head> <body>  <p class="father">      <p class="son"></p>  </p> </body>  </html>

二. 正方体(有瑕疵,页面文字显示有问题)

1<html  lang="en">  <head>     <meta charset="UTF-8">      <title>107-3D转换模块-正方体</title>     <style>     *{          margin: 0;         padding: 0;     }     ul{         width: 200px;          height: 200px;         border: 1px solid #000;         box-sizing:  border-box;         margin: 100px auto;         position: relative;          transform: rotateY(0deg) rotateX(0deg);         transform-style:  preserve-3d;     }     ul li{         list-style: none;         width:  200px;         height: 200px;         font-size: 60px;         text-align:  center;         line-height: 200px;         position: absolute;         left:  0;         top: 0;     }     ul li:nth-child(1){         background-color:  red;         transform: translateX(-100px) rotateY(90deg);     }     ul  li:nth-child(2){         background-color: green;         transform:  translateX(100px) rotateY(90deg);     }     ul li:nth-child(3){          background-color: blue;         transform: translateY(-100px)  rotateX(90deg);     }     ul li:nth-child(4){         background-color:  yellow;         transform: translateY(100px) rotateX(90deg);     }     ul  li:nth-child(5){         background-color: purple;         transform:  translateZ(-100px);     }     ul li: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.png

正方体(有瑕疵,仅供了解)

三. 正方体(终极方案)

旋转90度后,坐标系也跟着旋转了90度,故应该沿着z轴移动;

立体效果攻略:先旋转一定的度数,再沿z轴平移

1 2 3<html  lang="en">  <head>     <meta charset="UTF-8">      <title>108-3D转换模块-正方体终极</title>     <style>          *{             margin: 0;             padding: 0;         }          ul{             width: 200px;             height: 200px;             border: 1px  solid #000;             box-sizing: border-box;             margin: 100px  auto;             position: relative;             transform: rotateY(0deg)  rotateX(0deg);             transform-style: preserve-3d;         }         ul  li{             list-style: none;             width: 200px;             height:  200px;             font-size: 60px;             text-align: center;              line-height: 200px;             position: absolute;             left:  0;             top: 0;         }        ul  li:nth-child(1){             background-color: red;             transform:  rotateX(90deg) translateZ(100px);                    }         ul  li:nth-child(2){             background-color: green;             transform:  rotateX(180deg) translateZ(100px);         }         ul  li:nth-child(3){             background-color: blue;             transform:  rotateX(270deg) translateZ(100px);         }         ul  li:nth-child(4){             background-color: yellow;             transform:  rotateX(360deg) translateZ(100px);         }         ul  li:nth-child(5){             background-color: purple;             transform:  translateX(-100px) rotateY(90deg);         }         ul  li: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>
2.png

版权信息:本站所有资源仅供学习与参考,请勿用于商业用途,如有侵犯您的版权,请及时联系821794221#qq.com(#换@),我们将尽快处理。

您可能在找这些

  • 内容标签:

热门素材

jQuery倾斜逐张切换幻灯片

2017-03-17   浏览:501

JS淡出淡入式图片轮播效果

2013-01-30   浏览:10492

jQuery图片卡片翻牌动画特效

2017-03-14   浏览:478

跟随鼠标的走马灯滚动文字

2013-01-08   浏览:8653

左右按钮tab选项卡双切换

2017-03-17   浏览:445

jQuery动画二级下拉导航

2017-03-15   浏览:204

跟随鼠标且不停滚动的文字

2012-12-26   浏览:7844

jQuery全屏简洁带索引幻灯片

2017-03-17   浏览:381

jQuery评论内容上下滑动切换效果

2017-03-17   浏览:164

jQuery点击弹出仿百度登录窗口网页下载

2017-03-09   浏览:179

动画测试:可控制的透明度渐变、位置

2013-01-09   浏览:7983

jQuery+CSS3多张图片选择动画

2017-03-14   浏览:251