3D手机

 

 

<!DOCTYPE html>
<html>
<head>
  <title>3D手机</title>
  <link rel="stylesheet" type="text/css" href="CSS/3Dphone.css">
</head>
<body>
   <div class="mobile-wrapper">
        <div class="mobile">
            <div class="photo"></div>
            <div class="screen"></div>
        </div>
     </div>
</body> 
</html>
3Dphone.html
/*3Dphone.css*/
html {
  background: #f3f3f3;  /*背景颜色*/
}

.mobile-wrapper {
  width: 300px;       /*设置宽度*/
  position: absolute;  /*绝对定位,相对于浏览器窗口*/
  top: 50px;                /*距离顶端50px*/
  left: 50%;                       /*水平居中显示*/
  transform: translateX(-50%);
}
.mobile-wrapper:after { 
  content: '';           /*伪类的after内容为空*/
  width: 19%;          /*宽度为父级的19%*/
  height: 100%;       /*高度为父级的百分百*/
  position: absolute;  /*相对于父级绝对定位*/
  right: 0;           /*在父级的右上角*/
  top: 0;
  border-radius: 25px;  /*圆角*/
  display: block;       /*转变为块级元素*/
  background: linear-gradient(90deg, #937272, 75%, #c56161); /*背景颜色为线性*/
  z-index: -1;   /*放到底层*/
  transform: perspective(1000px) rotateY(14deg) scale(0.85) translate3d(-35px, 0px, 0);  /*变换: 视角1000px 旋转14度,放大0.85 向x轴反相移动*/
}
.mobile-wrapper:before {
  width: 100%;      /*宽度为父级100%*/
  height: 5%;       /*高度为5%*/
  background: black;  /*背景颜色为黑色*/
  position: absolute; /*定位为绝对定位*/
  bottom: 7%;         /*底端为7%*/
  left: 4%;           /*左端为4%*/   /*左下角*/
  content: '';          /*内容为空*/
  border-radius: 50%;   /*变成为圆*/
  filter: blur(9px);   /**/
  opacity: .2;         /*透明度为0.2*/
  transform: perspective(100px) rotate3d(1, 0, 0.5, 25deg) scale3d(0.8, 0.8, 0.8);  
  /*视角为100px
    旋转x y z
    缩放x y z

   */
}
.mobile-wrapper .mobile {
  width: 100%;            /*宽度设置为父级的100%*/
  padding-bottom: 216%;   /*内边距设置为父级的216%*/
  background: black;      /*设置颜色为黑色*/
  border-radius: 25px;    /*圆角25px*/
  transform: perspective(1000px) rotateY(-40deg) scale3d(0.8, 0.8, 0.8);
  /*视角1000px
   旋转Y轴
   放大比例x y z
  */
}
.mobile-wrapper .mobile .photo { /*摄像头*/
  border-radius: 0 0 15px 15px;   
  background: red; /*背景颜色*/
  width: 50%;                 /*宽度为父级的50%*/
  padding-bottom: 13%;        /*内边距为13%*/
  position: absolute;         /*相对父级定位*/
  left: 50%;                 /*左上角,水平居中,顶端0%*/
  top: 0%; 
  transform: translateX(-50%);
  z-index: 1;               /*层级为1*/
}
.mobile-wrapper .mobile .photo:after { /*摄像头after*/
  content: '';
  width: 40%;               /*宽度为40%*/
  padding-bottom: 5%;       /*内边距5%*/
  border-radius: 20px;      /*圆角*/
  background: #191919;     /*背景颜色*/
  border: 2px solid #191919;  /*边框*/
  position: absolute;          /*相对于父级定位*/
  right: 30%;                  /*右上角,距离右面30%，垂直居中*/
  top: 50%;  
  transform: translateY(-50%);
}
.mobile-wrapper .mobile .photo:before { /*摄像头before*/
  content: '';
  width: 8%;       /*宽度父级的8%*/
  padding-bottom: 8%;    /*内边距垂直方向扩充8%*/
  border-radius: 50%;             /*圆型*/
  background: rgba(255, 255, 255, 0.3);  /*背景颜色*/
  border: 2px solid #212121;     /*边框*/
  position: absolute;         /*绝对定位*/
  right: 10%;                 /*距离右边为10%,垂直居中*/
  top: 50%;
  transform: translateY(-50%);
}
.mobile-wrapper .mobile .screen { /*屏幕*/
  border-radius: 20px;    /*圆角*/
  width: 95%;            /*宽度父级5%*/
  height: 98%;           /*高度父级98%*/
  background: url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=141501976,2970151207&fm=26&gp=0.jpg) no-repeat center;  /*背景图片和不重复铺设*/
  background-size: cover;    /*背景图片大小,自适应*/
  position: absolute;    /*相对于父级定位*/
  left: 50%;                  /*水平和垂直方向居中*/
  top: 50%;
  transform: translate(-50%, -50%);
}

 

posted @ 2020-06-03 09:30  Crown-V  阅读(230)  评论(0)    收藏  举报