CSS3 3维形变完成立体式方块殊效源代码

日期:2020-08-28 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

序言

3维转换应用根据2维转换的同样特性,假如您熟习2维转换,你们发现三d形变的作用和2D转换的作用相近。三d形变与2D形变的最大不一样就在于其参照的座标轴不一样,2D形变的座标轴是平面的,只存在X轴和Y轴,而三d形变的座标轴则是X、Y、Z3条轴构成的立体式室内空间,X轴顺向是朝右,Y周顺向是朝下,Z轴顺向是朝显示屏外。

静态数据实际效果图以下:

案例编码

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf⑻">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <title>CSS33维形变</title>
        <!--  -->
        <style type="text/css">
         * {
          margin: 0;
          padding: 0;
         }
         
         .box {
          position:relative;
          top: 100px;
          width:300px;
          height: 300px;
          margin: 0 auto;
          background-color: #ccc;
          /*
           透視实际效果
           越大透視间距越平面,反之亦然
          */
          perspective:800px;
         }
         .content {
          /*3d主视图*/
          transform-style: preserve⑶d;
          /*过多动漫*/
          transition: all 3s linear;
          width:200px;
          height: 200px;
          position: absolute;
          top: 50px;
       left: 50px;
         }
         /*
          历经顺时针转动
         */
         .content:hover {
          transform: rotateX(180deg) rotateY(180deg);
         }
         /*
          方块公共性款式
         */
         .side {
          position: absolute;
       height: 200px;
       width: 200px;
       border: 2px solid #000;
       background: rgba(0,0,0,0.3);
       color: #fff;
       line-height: 200px;
       font-size: 30px;
       font-weight: bold;
       text-align: center;
       text-shadow: 0 ⑴px 0 rgba(0,0,0,0.2);
         }
         /*
          前
         */
         .side1 {
           transform: translateZ(100px);
         }
         /*
          后
         */
         .side2 {
          transform: rotateX(180deg) translateZ(100px);
         } 
         /*
          左
         */
         .side3 {
          transform: rotateY(⑼0deg) translateZ(100px);
         }
         /*
          右
         */
         .side4 {
          transform: rotateY(90deg) translateZ(100px);
         }
         /*
          上
         */
         .side5 {
          transform: rotateX(90deg) translateZ(100px);
         }
         /*
          下
         */
         .side6 {
          transform: rotateX(⑼0deg) translateZ(100px);
         }
        </style>
    </head>
    <body>
     <!-- begin -->
     <div class="box">
      <div class="content">
       <div class="side side1">1</div>
             <div class="side side2">2</div>
             <div class="side side3">3</div>
             <div class="side side4">4</div>
             <div class="side side5">5</div>
             <div class="side side6">6</div>
      </div>
     </div>
     <!-- end -->
    </body>
</html>

总结

以上便是这篇文章内容的所有內容了,期待本文的內容对大伙儿的学习培训或工作中能带来1定的协助,假如有疑惑大伙儿能够留言沟通交流。