无敌乱码 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 微信会员卡等级和折扣规则
  • ¥15 微信公众平台自制会员卡可以通过收款码收款码收款进行自动积分吗
  • ¥15 随身WiFi网络灯亮但是没有网络，如何解决？
  • ¥15 gdf格式的脑电数据如何处理matlab
  • ¥20 重新写的代码替换了之后运行hbuliderx就这样了
  • ¥100 监控抖音用户作品更新可以微信公众号提醒
  • ¥15 UE5 如何可以不渲染HDRIBackdrop背景
  • ¥70 2048小游戏毕设项目
  • ¥20 mysql架构，按照姓名分表
  • ¥15 MATLAB实现区间[a,b]上的Gauss-Legendre积分