无敌乱码 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 DS18B20内部ADC模数转换器
  • ¥15 做个有关计算的小程序
  • ¥15 MPI读取tif文件无法正常给各进程分配路径
  • ¥15 如何用MATLAB实现以下三个公式（有相互嵌套）
  • ¥30 关于#算法#的问题：运用EViews第九版本进行一系列计量经济学的时间数列数据回归分析预测问题 求各位帮我解答一下
  • ¥15 setInterval 页面闪烁，怎么解决
  • ¥15 如何让企业微信机器人实现消息汇总整合
  • ¥50 关于#ui#的问题：做yolov8的ui界面出现的问题
  • ¥15 如何用Python爬取各高校教师公开的教育和工作经历
  • ¥15 TLE9879QXA40 电机驱动