响应式web开发chapter3/demo04

最新推荐文章于 2024-04-03 22:16:19 发布

庒

最新推荐文章于 2024-04-03 22:16:19 发布

阅读量155

点赞数 1

文章标签： css html5

本文链接：https://blog.csdn.net/weixin_54042448/article/details/123286050

版权

CSS 3D 立方体 transform perspective

关键词由CSDN通过智能技术生成

demo04.html文件

<!DOCTYPE html>
<html>
   <head>
      <meat charset="UTF-8">
      <title> 立方体 </title>

   </head>
   <style>
       .box {
           width: 200px;
           height: 200px;
           position: relative;
           perspective: 1000px;
           /*定义子元素保留的3D位置*/
           transform-style: preserve-3d;
           transform: translate(150px,100px) rotateX(-30deg)
           rotateY(30deg);
       }
       .front,.back,.left,.right,.top,.bottom {
             background-color: #ccc;
             font-size: 30px;
             text-align: center;
             line-height: 200px;
             position: absolute;
             border: 1px solid #fff;
             right: 0;
             bottom: 0;
             left: 0;
             top: 0;
             opacity: 0.5;
       }
       .front{
           transform: translateZ(100px);
       }
       .back {
           transform: translateZ(-100px);
       }
       .left {
           transform:  rotateY(90deg) translateZ(-100px);
       }
       .right {
           transform:  rotateY(90deg) translateZ(100px);
       }
       .top {
           transform: rotateX(90deg) translateZ(100px);
       }
       .bottom {
            transform:rotateX(90deg) translateZ(-100px);
        }   
  
         
         
     </style>
     

   <body>
       <div class="box">
        <div class="front">1</div>
        <div class="back">2</div>
        <div class="left">3</div>
        <div class="right">4</div>
        <div class="top">5</div>
        <div class="bottom">6</div>
       </div>
         
     
   </body>



</html>

运行结果

庒

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
响应式web开发chapter3/demo04

demo04.html文件<!DOCTYPE html><html> <head> <meat charset="UTF-8"> <title> 立方体 </title> </head> <style> .box { width: 200px; height: 200px; posi
复制链接

扫一扫