巅云智能建站平台搭建版(创业门户版)火爆上线,终身授权!新增:文章智能采集+全站真静态打包+城市分站+智能小程序+非法词过滤+H5自适应+智能链词等功能功能详情
帮助文档Help

基于CSS3实现立方体自转效果

一佰互联网站制作(www.yinxi.net) 发布日期 2019-04-21 17:24:57 浏览数: 100

先是HTML 一个父div包含四个绝对定位的div
CSS Code复制内容到剪贴板
  1. <div class="container container--realistic">    
  2. <div class="cube cube--ani">    
  3. <div class="face">1</div>    
  4. <div class="face">2</div>    
  5. <div class="face">3</div>    
  6. <div class="face">4</div>    
  7. </div>    
  8. </div>   
首先,一个静态的立方体
CSS Code复制内容到剪贴板
  1. .face:nth-child() {    
  2. -webkit-transform: /*rotateY(deg)*/ translateZ(.em /* half the side length, em in this case */);    
  3. }    
  4. .face:nth-child() {    
  5. -webkit-transform: rotateY( deg) translateZ(.em);    
  6. }    
  7. .face:nth-child() {    
  8. -webkit-transform: rotateY(deg) translateZ(.em);    
  9. }    
  10. .face:nth-child() {    
  11. -webkit-transform: rotateY(deg) translateZ(.em);    
  12. }  
让立方体转起来
CSS Code复制内容到剪贴板
  1. .cube--ani {    
  2. -webkit-animation: rot s linear infinite;    
  3. }    
  4. @-webkit-keyframes rot {    
  5. to { -webkit-transform: rotateY(-deg) rotateX(deg); }    
  6. }  
这里定义了一个动画 rot
从起始位置转动到 Y轴-330deg X轴370deg
并且循环无限次,每次4s
基于CSS3实现立方体自转效果 的全部内容就给大家介绍完了,希望对大家有所帮助!
一佰互联是全国知名建站品牌服务商,我们有九年网站建设、网站制作、网页设计、php开发和域名注册及虚拟主机服务经验,提供的自助建站服务更是全国有名。近年来还整合团队优势自主开发了可视化多用户”巅云建站系统“3.0平台版,拖拽排版网站制作设计,轻松实现pc站、手机微网站、小程序、APP一体化全网营销网站建设 ,已成功的为全国上百家网络公司提供自助建站平台搭建服务。

相关新闻more

28
03月
PHP高级工程师应具备哪些条件

简介:大家不论是参加PHP培训还是自学PHP最终的目的都是为了能成为PHP高级工程师找到一份高薪的好工作,但是想要成为PHP高级工程师需要具... >>详情

10
04月
如何搭建Web端布局框架?来看滴滴设计团队的

还在苦恼如何搭建Web端布局框架?来这里找方法吧,CDX魔方项目组成员用血和泪的经验告诉你答案。前言对于承载多个子产品的网站而言,单一的布局... >>详情

09
05月
谈论SEO优化面临的严峻问题

一、百度出品越来越多,首页被占的可能也越来越大 晚期百度出品正常重要是:百度文库,百度晓得,百度百科。随着百度公司一直壮大,搜寻引擎一... >>详情

29
04月
php文字水印和php图片水印实现代码(二种

文字水印文字水印就是在图片上加上文字,主要使用gd库的imagefttext方法,并且需要字体文件。效果图如下:实现代码如下:复制代码 代码... >>详情

高端网站建设

美工兼顾SEO,为企业电子商务营销助力!

电话:

023-85725751
建站

产品

域名注册 虚拟主机 云服务器 企业邮局
智能建站 APP打包 微站/小程序 创业平台
网站推广 媒体营销 智能采集 AI机器人
400电话 短信营销 店销机器人
私人定制 门户网站