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

HTML5+CSS3 誘人的實例:3D立方體旋轉動畫實例

本篇文章主要介紹了3D立方體旋轉動畫實例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

本文介紹了HTML5+CSS3 誘人的實例: 3D立方體旋轉動畫實例,具體如下

效果圖:

知識點:

1、perspective ,transform 的復習

2、CSS3 backgroud實現格格背景,即面上的小格格

3、 @-webkit-keyframes 實現動畫

HTML:

<body>  
 <div class="stage">  
    <div class="cube">  
        <div class="font"></div>  
        <div class="back"></div>  
        <div class="left"></div>  
        <div class="right"></div>  
        <div class="top"></div>  
        <div class="bottom"></div>  
    </div>  
  </div>   
</body>  

前面的3D商品展示中已經說過如何制作正方體,并且那個上面還有數字,理論上說比這個復雜,雖然木有這個炫~這里就不多說了。

CSS:

html  
       {  
           background: -webkit-radial-gradient(center, ellipse, #430d6d 0%, #000000 100%);  
           background: radial-gradient(ellipse at center, #430d6d 0%, #000000 100%);  
           height: 100%;  
       }  
  
       .stage  
       {  
           -webkit-perspective: 1000px;  
           width: 20em;  
           height: 20em;  
           left: 50%;  
           top: 50%;  
           margin-left: -10em;  
           margin-top: -10em;  
           position: absolute;  
       }  
  
       .cube  
       {  
           position: absolute;  
           width: 100%;  
           height: 100%;  
           -webkit-transform-style: preserve-3d;  
           -webkit-transform: rotateX(-20deg) rotateY(-20deg);  
       }  
  
       .cube *  
       {  
           background: -webkit-linear-gradient(left, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px), -webkit-linear-gradient(top, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px);  
           -webkit-background-size: 2.5em 2.5em;  
  
           background-color: rgba(0, 0, 0, 0.5);  
           position: absolute;  
           width: 100%;  
           height: 100%;  
           border: 2px solid rgba(54, 226, 248, 0.5);  
           -webkit-box-shadow: 0 0 5em rgba(0, 128, 0, 0.4);  
  
       }  
  
       .font  
       {  
           -webkit-transform: translateZ(10em);  
       }  
  
       .back  
       {  
           -webkit-transform: rotateX(180deg) translateZ(10em);  
       }  
  
       .left  
       {  
           -webkit-transform: rotateY(-90deg) translateZ(10em);  
       }  
  
       .right  
       {  
           -webkit-transform: rotateY(90deg) translateZ(10em);  
       }  
  
       .top  
       {  
           -webkit-transform: rotateX(90deg) translateZ(10em);  
       }  
  
       .bottom  
       {  
           -webkit-transform: rotateX(-90deg) translateZ(10em);  
       }  

同樣:stage作為舞臺,cube設置子元素的效果為3d,然后每個面都進行旋轉和設置translateZ然后形成立方體。

為每個面設置backgroud設置小格格的代碼:

background: -webkit-linear-gradient(  
           left,  
           rgba(54, 226, 248, 0.5) 0px,  
           rgba(54, 226, 248, 0.5) 3px,  
           rgba(0, 0, 0, 0) 0px),  
                   -webkit-linear-gradient(  
           top,  
           rgba(54, 226, 248, 0.5) 0px,  
           rgba(54, 226, 248, 0.5) 3px,  
           rgba(0, 0, 0, 0) 0px);  
  
       -webkit-background-size: 2.5em 2.5em;  

背景設置,從左到右的3像素的條條,從上到下的3像素的條條;然后設置背景大小為2.5em 2.5em ,然后將背景重復顯示,效果如下(我添加了邊框):

現在的完整效果:

可以看到立方體已經成型了,最后添加上動畫就行了,不要覺得動畫很復雜,其實很簡單~

定義一個動畫幀:

@-webkit-keyframes spin  
       {  
           from  
           {  
               -webkit-transform: translateZ(-10em) rotateX(0) rotateY(0deg);  
               transform: translateZ(-10em) rotateX(0) rotateY(0deg);  
           }  
  
           to  
           {  
               -webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);  
               transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);  
           }  
       }  

名字為spin,開始時 translateZ(-10em) rotateX(0) rotateY(0deg); 結束時 : translateZ(-10em) rotateX(360deg) rotateY(360deg); 即同時繞著x,y軸360度旋轉。

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

相關文檔推薦

本篇文章主要介紹了詳解CSS3 rem(設置字體大小) 教程,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
本篇文章主要介紹了CSS3 linear-gradient線性漸變生成加號和減號的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
這篇文章主要介紹了CSS mask-image屬性詳細介紹(小結)的相關資料,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
這篇文章主要介紹了css3中的漸進增強和優雅降級的相關資料,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
這篇文章主要介紹了淺談css3新單位vw、vh、vmin、vmax的使用詳解的相關資料,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
這篇文章主要介紹了淺談css3中calc在less編譯時被計算的解決辦法的相關資料,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
主站蜘蛛池模板: 蜘蛛车-高空作业平台-升降机-高空作业车租赁-臂式伸缩臂叉装车-登高车出租厂家 - 普雷斯特机械设备(北京)有限公司 | 二手色谱仪器,十万分之一分析天平,蒸发光检测器,电位滴定仪-湖北捷岛科学仪器有限公司 | 留学生辅导网-在线课程论文辅导-留学生挂科申诉机构 | 东莞螺杆空压机_永磁变频空压机_节能空压机_空压机工厂批发_深圳螺杆空压机_广州螺杆空压机_东莞空压机_空压机批发_东莞空压机工厂批发_东莞市文颖设备科技有限公司 | 河南不锈钢水箱_地埋水箱_镀锌板水箱_消防水箱厂家-河南联固供水设备有限公司 | 工业rfid读写器_RFID工业读写器_工业rfid设备厂商-ANDEAWELL | 手机存放柜,超市储物柜,电子储物柜,自动寄存柜,行李寄存柜,自动存包柜,条码存包柜-上海天琪实业有限公司 | 天津蒸汽/热水锅炉-电锅炉安装维修直销厂家-天津鑫淼暖通设备有限公司 | 电动葫芦|手拉葫芦|环链电动葫芦|微型电动葫芦-北京市凌鹰起重机械有限公司 | SMC-SMC电磁阀-日本SMC气缸-SMC气动元件展示网 | 道达尔润滑油-食品级润滑油-道达尔导热油-合成导热油,深圳道达尔代理商合-深圳浩方正大官网 | 六维力传感器_六分量力传感器_模腔压力传感器-南京数智微传感科技有限公司 | 高速龙门架厂家_监控杆_多功能灯杆_信号灯杆_锂电池太阳能路灯-鑫世源照明 | 骁龙云呼电销防封号系统-axb电销平台-外呼稳定『免费试用』 | 柔性输送线|柔性链板|齿形链-上海赫勒输送设备有限公司首页[输送机] | 压滤机-洗沙泥浆处理-压泥机-山东创新华一环境工程有限公司 | 重庆网站建设,重庆网站设计,重庆网站制作,重庆seo,重庆做网站,重庆seo,重庆公众号运营,重庆小程序开发 | 耐腐蚀泵,耐腐蚀真空泵,玻璃钢真空泵-淄博华舜耐腐蚀真空泵有限公司 | 山东锐智科电检测仪器有限公司_超声波测厚仪,涂层测厚仪,里氏硬度计,电火花检漏仪,地下管线探测仪 | 混合反应量热仪-高温高压量热仪-微机差热分析仪DTA|凯璞百科 | 碳刷_刷握_集电环_恒压簧_电刷厂家-上海丹臻机电科技有限公司 | 油罐车_加油机_加油卷盘_加油机卷盘_罐车人孔盖_各类球阀_海底阀等车用配件厂家-湖北华特专用设备有限公司 | PSI渗透压仪,TPS酸度计,美国CHAI PCR仪,渗透压仪厂家_价格,微生物快速检测仪-华泰和合(北京)商贸有限公司 | 半自动预灌装机,卡式瓶灌装机,注射器灌装机,给药器灌装机,大输液灌装机,西林瓶灌装机-长沙一星制药机械有限公司 | 青岛侦探_青岛侦探事务所_青岛劝退小三_青岛婚外情取证-青岛王军侦探事务所 | 雨水收集系统厂家-雨水收集利用-模块雨水收集池-徐州博智环保科技有限公司 | 大巴租车平台承接包车,通勤班车,巴士租赁业务 - 鸿鸣巴士 | 酒吧霸屏软件_酒吧霸屏系统,酒吧微上墙,夜场霸屏软件,酒吧点歌软件,酒吧互动游戏,酒吧大屏幕软件系统下载 | 阿里巴巴诚信通温州、台州、宁波、嘉兴授权渠道商-浙江联欣科技提供阿里会员办理 | 钢格板|热镀锌钢格板|钢格栅板|钢格栅|格栅板-安平县昊泽丝网制品有限公司 | 气体热式流量计-定量控制流量计(空气流量计厂家)-湖北南控仪表科技有限公司 | 北京森语科技有限公司-模型制作专家-展览展示-沙盘模型设计制作-多媒体模型软硬件开发-三维地理信息交互沙盘 | 塑钢件_塑钢门窗配件_塑钢配件厂家-文安县启泰金属制品有限公司 深圳南财多媒体有限公司介绍 | 提升海外网站流量,增加国外网站访客UV,定制海外IP-访客王 | 天空彩票天下彩,天空彩天空彩票免费资料,天空彩票与你同行开奖,天下彩正版资料大全 | 重庆网站建设,重庆网站设计,重庆网站制作,重庆seo,重庆做网站,重庆seo,重庆公众号运营,重庆小程序开发 | 冷柜风机-冰柜电机-罩极电机-外转子风机-EC直流电机厂家-杭州金久电器有限公司 | 垃圾清运公司_环卫保洁公司_市政道路保洁公司-华富环境 | 找果网 | 苹果手机找回方法,苹果iPhone手机丢了找回,认准找果网! | 月嫂_保姆_育婴_催乳_母婴护理_产后康复_养老护理-吉祥到家家政 硫酸亚铁-聚合硫酸铁-除氟除磷剂-复合碳源-污水处理药剂厂家—长隆科技 | 真空搅拌机-行星搅拌机-双行星动力混合机-广州市番禺区源创化工设备厂 |