pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

利用HTML5+CSS3實現3D轉換效果實例詳解

對于css的二維世界,相信大家都不陌生。在二維的世界里,我們可以對元素設置寬高、位置、旋轉、背景等等。在css三維世界里,擴展出了一個z軸,這個z軸垂直于屏幕并指向外面。下面

前言

本文介紹的是css3的3d模塊,對大家具有一定的參考價值,感興趣的朋友們下面來一起看看吧。

介紹

首先,我們來了解一下3d的坐標系,x軸在屏幕上為水平方向,y軸為垂直方向,而z軸為垂直于屏幕的方向。

不理解的話可以參考定位屬性的z-index屬性,那個在某種意義上就是讓元素在z軸的移動。

在2d轉換模塊中我們研究了rotateX()和rotateY()方法,就是繞x軸和y軸旋轉,這其實就是3d模塊的一種表現,當然要看到近大遠小的3d效果,還需要在父元素上添加透視屬性:transform:perspective(500px);值為透視點到元素的距離,具體概念請看美術透視教學。。。。

多說無益,上代碼:
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            margin: 0 auto;
        }
        .div1{
            margin-top: 100px;
            transform:perspective(500px) rotatey(0deg);
            position: relative;
            border:1px solid #000000;
            background-color: #ff0000;
        }
        .div1 div{
       transform:rotatey(45deg);

            position: absolute;
            font-size: 80px;
            line-height: 200px;
            text-align: center;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div class="div1">
    <div class="div1_1">1</div>
</div>
</body>

</html>

效果圖:

利用HTML5+CSS3實現3D轉換效果實例詳解 

但是,你會發現當父元素轉到90度的時候元素消失了,這就說明元素是沒有厚度的。說明元素雖然具有了近大遠小的透視屬性,但本質上仍是2d的。

這是你需要添加transform-style:preserve-3d;樣式來讓元素在3d空間中轉換。這樣,元素就處在了3維的空間里,當父元素旋轉90度,仍能看到里面的子元素。

示例代碼:
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            margin: 0 auto;
        }
        .div1{
            margin-top: 100px;
            transform:perspective(500px) rotatey(0deg);
            transform-style:preserve-3d;
            position: relative;
            border:1px solid #000000;
        }
        .div1 div{
            background-color: #ff0000;
            transform:rotatey(45deg);
            position: absolute;
            font-size: 80px;
            line-height: 200px;
            text-align: center;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div class="div1">
    <div class="div1_1">1</div>
</div>
</body>

</html>

效果圖:  

利用HTML5+CSS3實現3D轉換效果實例詳解  

上面,我們對3d轉換模塊有了一個初步的了解,下面我們一起做一個正方體,來整理一下3d模塊的知識。

一步步來做著寫太過麻煩,我就將過程寫在代碼的注釋里,小伙伴們請見諒。

代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轉換模塊-正方體</title>
    <style>

    *{
        margin: 0;
        padding: 0;
        /*去除默認邊距*/
    }

    ul{
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        box-sizing: border-box;
        margin: 100px auto;
        position: relative;
        /*修改基本樣式*/
        transform: rotateY(45deg) rotateX(45deg);
        /*旋轉看看效果*/
        transform-style: preserve-3d;
        /*將父元素設置為3d空間*/
    }
    ul li{
        list-style: none;
        width: 200px;
        height: 200px;
        font-size: 60px;
        text-align: center;
        line-height: 200px;
        position: absolute;
        left: 0;
        top: 0;
        /*修改基本樣式*/
    }
    ul li:nth-child(1){
        background-color: red;
        transform: translateX(-100px) rotateY(90deg);
        /*將第一個l向左移動100像素,然后繞y軸旋轉90度,形成左邊的面*/
    }
    ul li:nth-child(2){
        background-color: green;
        transform: translateX(100px) rotateY(90deg);
        /*將第一個2向右移動100像素,然后繞y軸旋轉90度*,形成右邊的面*/
    }
    ul li:nth-child(3){
        background-color: blue;
        transform: translateY(-100px) rotateX(90deg);
        /*將第一個3向上移動100像素,然后繞x軸旋轉90度,形成上面的面*/
    }
    ul li:nth-child(4){
        background-color: yellow;
        transform: translateY(100px) rotateX(90deg);
        /*將第一個4向下移動100像素,然后繞x軸旋轉90度*/
    }
    ul li:nth-child(5){
        background-color: purple;
        transform: translateZ(-100px);
        /*將第一個5向后移動100像素,形成后面的面*/
    }
    ul li:nth-child(6){
        background-color: pink;
        transform: translateZ(100px);
        /*將第一個l向前移動100像素,形成前面的面*/
    }

</style>
</head>
<body>
<ul>
    <!--首先做好html布局,正方體有6個面,所以寫了6個li-->
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
</body>
</html>

效果圖:

利用HTML5+CSS3實現3D轉換效果實例詳解

這個方法比較好理解,理解了之后請看下一個。

【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。

相關文檔推薦

本篇文章主要介紹了詳解CSS3 rem(設置字體大小) 教程,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
本篇文章主要介紹了CSS3 linear-gradient線性漸變生成加號和減號的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
這篇文章主要介紹了CSS mask-image屬性詳細介紹(小結)的相關資料,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
這篇文章主要介紹了css3中的漸進增強和優雅降級的相關資料,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
這篇文章主要介紹了淺談css3新單位vw、vh、vmin、vmax的使用詳解的相關資料,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
這篇文章主要介紹了淺談css3中calc在less編譯時被計算的解決辦法的相關資料,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
主站蜘蛛池模板: 屏蔽泵厂家,化工屏蔽泵_维修-淄博泵业 | 三佳互联一站式网站建设服务|网站开发|网站设计|网站搭建服务商 赛默飞Thermo veritiproPCR仪|ProFlex3 x 32PCR系统|Countess3细胞计数仪|371|3111二氧化碳培养箱|Mirco17R|Mirco21R离心机|仟诺生物 | 神超官网_焊接圆锯片_高速钢锯片_硬质合金锯片_浙江神超锯业制造有限公司 | 布袋式除尘器|木工除尘器|螺旋输送机|斗式提升机|刮板输送机|除尘器配件-泊头市德佳环保设备 | 爆炸冲击传感器-无线遥测传感器-航天星百科 | 煤棒机_增碳剂颗粒机_活性炭颗粒机_木炭粉成型机-巩义市老城振华机械厂 | 不锈钢法兰-碳钢法兰-法兰盘生产加工厂家-[鼎捷峰]-不锈钢法兰-碳钢法兰-法兰盘生产加工厂家-[鼎捷峰] | 金属波纹补偿器厂家_不锈钢膨胀节价格_非金属伸缩节定制-庆达补偿器 | 广域铭岛Geega(际嘉)工业互联网平台-以数字科技引领行业跃迁 | GAST/BRIWATEC/CINCINNATI/KARL-KLEIN/ZIEHL-ABEGG风机|亚喜科技 | 河南生物显微镜,全自动冰冻切片机-河南荣程联合科技有限公司 | 上海阳光泵业制造有限公司 -【官方网站】| vr安全体验馆|交通安全|工地安全|禁毒|消防|安全教育体验馆|安全体验教室-贝森德(深圳)科技 | 婚博会2024时间表_婚博会门票领取_婚博会地址-婚博会官网 | 真空干燥烘箱_鼓风干燥箱 _高低温恒温恒湿试验箱_光照二氧化碳恒温培养箱-上海航佩仪器 | 冷却塔改造厂家_不锈钢冷却塔_玻璃钢冷却塔改造维修-广东特菱节能空调设备有限公司 | 杭州网络公司_百度SEO优化-外贸网络推广_抖音小程序开发-杭州乐软科技有限公司 | 不锈钢复合板|钛复合板|金属复合板|南钢集团安徽金元素复合材料有限公司-官网 | 带压开孔_带压堵漏_带压封堵-菏泽金升管道工程有限公司 | 储气罐,真空罐,缓冲罐,隔膜气压罐厂家批发价格,空压机储气罐规格型号-上海申容压力容器集团有限公司 | 雨水收集系统厂家-雨水收集利用-模块雨水收集池-徐州博智环保科技有限公司 | 金属切削液-脱水防锈油-电火花机油-抗磨液压油-深圳市雨辰宏业科技发展有限公司 | 西宁装修_西宁装修公司-西宁业之峰装饰-青海业之峰墅级装饰设计公司【官网】 | 厦门网站建设_厦门网站设计_小程序开发_网站制作公司【麦格科技】 | 钛合金标准件-钛合金螺丝-钛管件-钛合金棒-钛合金板-钛合金锻件-宝鸡远航钛业有限公司 | 道达尔润滑油-食品级润滑油-道达尔导热油-合成导热油,深圳道达尔代理商合-深圳浩方正大官网 | 广州云仓代发-昊哥云仓专业电商仓储托管外包代发货服务 | 美国PARKER齿轮泵,美国PARKER柱塞泵,美国PARKER叶片泵,美国PARKER电磁阀,美国PARKER比例阀-上海维特锐实业发展有限公司二部 | 开锐教育-学历提升-职称评定-职业资格培训-积分入户 | 彭世修脚_修脚加盟_彭世修脚加盟_彭世足疗加盟_足疗加盟连锁_彭世修脚技术培训_彭世足疗 | 老房子翻新装修,旧房墙面翻新,房屋防水补漏,厨房卫生间改造,室内装潢装修公司 - 一修房屋快修官网 | 蓝莓施肥机,智能施肥机,自动施肥机,水肥一体化项目,水肥一体机厂家,小型施肥机,圣大节水,滴灌施工方案,山东圣大节水科技有限公司官网17864474793 | 电机保护器-电动机综合保护器-上海硕吉电器有限公司 | 展厅设计公司,展厅公司,展厅设计,展厅施工,展厅装修,企业展厅,展馆设计公司-深圳广州展厅设计公司 | 嘉兴泰东园林景观工程有限公司_花箱护栏 | 小型数控车床-数控车床厂家-双头数控车床 | 氢氧化钙设备, 氢氧化钙生产线-淄博惠琛工贸有限公司 | 波纹补偿器_不锈钢波纹补偿器_巩义市润达管道设备制造有限公司 | PC构件-PC预制构件-构件设计-建筑预制构件-PC构件厂-锦萧新材料科技(浙江)股份有限公司 | 帽子厂家_帽子工厂_帽子定做_义乌帽厂_帽厂_制帽厂_帽子厂_浙江高普制帽厂 | 润滑油加盟_润滑油厂家_润滑油品牌-深圳市沃丹润滑科技有限公司 琉璃瓦-琉璃瓦厂家-安徽盛阳新型建材科技有限公司 |