无敌乱码 2022-01-18 21:55 采纳率: 66.7%
浏览 57
已结题

css3 写不出3d效果怎么办

       
       
       
       
       
       
       
   
  • 写回答

3条回答 默认 最新

  • 明日晴空 2022-01-19 01:01
    关注

    鼠标经过3d翻转效果

    
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            li{width:200px;list-style: none;}
            a{
                text-decoration: none;
                display: block;
                font-size: 20px;
                line-height: 20px;
                padding: 15px 30px 15px 31px;
                color: #fff;                
                position: relative; 
                perspective: 200px;     /*设置3D舞台布景,仅对子元素产生效果,数值越小，靠近屏幕低端的一侧会越长等...，建议先单独去研究一下*/ 
                text-align: center;
            }   
            .tD-box{
                display: block;
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;    
                top: 0;
                transition: all .3s ease-out;
                transform: translateZ(-25px);    /*因为li高度为50px,所以这里设置-25px,.front和.back设置为25px*/
                -webkit-transform-style: preserve-3d;  /*使被转换的子元素保留其 3D 转换*/
                -moz-transform-style: preserve-3d;
                -ms-transform-style: preserve-3d;
                -o-transform-style: preserve-3d;
                transform-style: preserve-3d;
            }           
            .front{
                background: #006666;
                transform:rotateX(0deg) translateZ(25px);  /*rotateX和translateZ位置不可调换,执行顺序会不同,效果也不同*/
            }
            .back{
                transform:rotateX(-90deg) translateZ(25px);
                }
            .front,.back{
                display: block;
                position: absolute;
                width: 100%;
                height: 100%;
                left: 0;
                top:0;
                padding: 15px 30px 15px 31px;
                -webkit-pointer-events: none;  /*允许点击穿透,可自行了解*/
                -moz-pointer-events: none;
                -ms-pointer-events: none;
                -o-pointer-events: none;
                pointer-events: none;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                }
            .back{
              background-color: #51938f;
              background-size: 5px 5px;
              background-position: 0 0, 30px 30px;
              background-color: #aba09e;
              background-image: -webkit-linear-gradient(top left, #aba09e, #818181);
              background-image: -o-linear-gradient(top left, #aba09e, #818181);
              background-image: linear-gradient(to bottom right, #aba09e, #818181);
            }
            a:hover .tD-box{                
                transform: translateZ(-25px) rotateX(90deg);                
            }   
        </style>
    </head>
    <body>
        <div class="tD">
            <ul>
                <li><a href="">
                    Home
                    <span class="tD-box"><span class="front">Home</span><span class="back">Home</span></span>
                </a></li>
            </ul>
        </div>
    </body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题？

问题事件

  • 系统已结题 1月27日
  • 已采纳回答 1月19日
  • 修改了问题 1月18日
  • 修改了问题 1月18日
  • 展开全部

悬赏问题

  • ¥15 对于这个问题的解释说明
  • ¥200 询问：python实现大地主题正反算的程序设计，有偿
  • ¥15 smptlib使用465端口发送邮件失败
  • ¥200 总是报错，能帮助用python实现程序实现高斯正反算吗？有偿
  • ¥15 对于squad数据集的基于bert模型的微调
  • ¥15 为什么我运行这个网络会出现以下报错？CRNN神经网络
  • ¥20 steam下载游戏占用内存
  • ¥15 CST保存项目时失败
  • ¥20 java在应用程序里获取不到扬声器设备
  • ¥15 echarts动画效果的问题，请帮我添加一个动画。不要机器人回答。