3d变形

最新推荐文章于 2022-10-08 19:39:46 发布

一李

最新推荐文章于 2022-10-08 19:39:46 发布

阅读量285

点赞数

分类专栏：前端文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_43641432/article/details/108308850

版权

前端专栏收录该内容

102 篇文章 1 订阅

订阅专栏

景深（depth of filed.DOF）：

肉眼距离显示器的距离，越大，效果越不好，perspective用于激活一个3d空间，属性值就是景深大小

不可以继承，作用给它的子元素：（给一个包裹）

让3d场景有近大远小的效果

使用的话必须放在首位

灭点

景深控制的是灭点的位置，景深越大，灭点越远，元素变形越小

景深基点：视角的位置。

perspective-origin：

3d舞台

transfrom-style：preserve3d;不可继承，作用在子元素

营造有层级的3d舞台

景深的叠加

尽量去避免景深的叠加，只在外面的包裹区上一个。

隐藏背面

backface-visibility:hidden

3d画出一个立方体多棱柱

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       *{
           padding: 0;
           margin: 0;
       }
       #wrap{
           position: absolute;
           left: 0;
           top: 0;
           right: 0;
           bottom: 0;
           margin: auto;
           width: 300px;
           height: 300px;
           border: 1px solid;
           
           
           perspective: 100px;
           transform-style: preserve-3d;
       }
       .box{
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 100px;
            height: 100px;
            
           
            transition: 3s;
            transform-style: preserve-3d;
            transform-origin: center center -28.86px;
       }
       .box>div{
           position: absolute;
           width: 100px;
           height: 100px;
           background-color: rgba(100, 120, 45, 0.3);

           text-align: center;
           font: 50px/100px "微软雅黑";  
           transform-origin: center center -28.86px;
       }
       
       .box>div:nth-child(3){
        transform: rotateY(240deg);
       }
       .box>div:nth-child(2){
        transform: rotateY(120deg);
       }
       .box>div:nth-child(1){
     
       }
       #wrap:hover .box{
           transform: rotateY(180deg);
       }
       
    </style>
</head>
<body>
   
    <div id="wrap">
       <div class="box">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            
            
       </div>
        
    </div>
</body>
</html>