原荐如何用CSS3画出懂你的3D魔方？

栏目: CSS · 发布时间: 6年前

内容简介：最近在写《

原荐如何用CSS3画出懂你的3D魔方？

作者：首席填坑官∙苏南
交流：912594095、GZ好： honeyBadger8 ，本文原创，著作权归作者所有，转载请注明原链接及出处。

前言

最近在写《每周动画点点系列》文章，上一期分享了 < 手把手教你如何绘制一辆会跑车 > ，本期给大家带来是结合CSS3画出来的一个 立体3d魔方 ，结合了 js 让你随心所欲想怎么转，就怎么转，这里是 @IT·平头哥联盟，我是 首席填坑官 ∙ 苏南 (South·Su)，我们先来看看效果，然后再分解它的实现过程吧

原荐如何用CSS3画出懂你的3D魔方？

绘制过程：

好吧，gif图看着好像有点不是很清晰，想在线预览的同学，可点击在线预览，废话不多扯了，先来分析一下，看如何实现这个功能吧。

∙ API预热：

本次示例是一个立体的正方形，既然有立体效果，肯定少不了CSS3中的 -webkit-perspective -透视、 preserve-3d -三维空间，这个两个是重点哦，当然还有 transform-origin 、 transition 、 transform 等，先来回故一下 API 怎么是讲的吧：

perspective 取值 :

none ：不指定透视 ;
length ：指定观察者与「z=0」平面的距离，使具有三维位置变换的元素产生 透视效果 。「z>0」的三维元素比正常大，而「z<0」时则比正常小，大小程度由该属性的值决定，不允许负值。

transform-style 取值：

flat ：指定子元素位于此元素所在平面内;
preserve-3d ：指定子元素定位在三维空间内,当该属性值为 preserve-3 d时，元素将会创建局部堆叠上下文;

小结：决定一个变换元素看起来是处在三维空间还是平面内，需要该元素的父元素上定义 <' transform-style '> 属性，也就是说想某元素有三维效果，需要设定它的父级有 preserve-3d 。

transform-origin 取值：

percentage：用百分比指定坐标值。可以为负值;
length：用长度值指定坐标值。可以为负值;
left：指定原点的横坐标为left;
center①：指定原点的横坐标为center;
right：指定原点的横坐标为right;
top：指定原点的纵坐标为top;
center②：指定原点的纵坐标为center;
bottom：指定原点的纵坐标为bottom;

transform、transition等，就不介绍了

/* perspective 使用示例：*/
div{
  -webkit-perspective:600px;
  perspective:600px;
}

/*transform-style 使用示例：*/
.preserve{
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
}

  /*transform-origin 使用示例：*/
.preserve{
  -webkit-transform-origin:50% 50% -100px; or 
  -webkit-transform-origin:bottom; or
  -webkit-transform-origin:top;
  …………
}

∙ 绘制6个面：

是的，我没有说错，就是6个面：上、正面、下、背面、左、右，
上面API讲了这么多，来实践试一下吧，写6个div,结构大概是这样的，也是接下来的魔方需要的结构：

<div class="cube">
    <div class="cube-inner running">
        <p class="single-side s1"><span>最</span></p>
        <p class="single-side s2"><span>懂</span></p>
        <p class="single-side s3"><span>你</span></p>
        <p class="single-side s4"><span>的</span></p>
        <p class="single-side s5"><span>魔</span></p>
        <p class="single-side s6"><span>方</span></p>
    </div>
</div>

原荐如何用CSS3画出懂你的3D魔方？

rotate

原荐如何用CSS3画出懂你的3D魔方？

.cube{
    width:200px;
    height:200px;
    margin:10px auto;
    padding:260px;
    position:relative;
    -webkit-perspective:600px;
    perspective:600px;
    transition: .5s ;

}
.cube-inner{
    width:200px;
    height:200px;
    position:relative;
    -webkit-transform-style:preserve-3d;
    transition:.3s; 
    -webkit-transform-origin:50% 50% -100px;
    transform: rotateX(45deg);
}
.cube:hover{
    /*鼠标经过时，把 perspective 过渡到100 */
    -webkit-perspective:100px;
    perspective:100px;
}

既然API有效，那么拉下来我们就画出6个面吧，按：上、正面、下、背面、左、右，这个顺序来设置吧;
首先，我们要指定它们是在三维空间内的 preserve-3d ，也就是6个面的父级要设置 transform-style 样式;
以上都设置好后，再来看看6个面吧，为了便于区分，给它们每个都设置了不同颜色(用了css3的渐变 radial-gradient )——不想手写的同学推荐一个网站可在线设置你要的效果，复制样式即可，先来一睹风采,为了便于观察，整体角度旋转了10deg：

原荐如何用CSS3画出懂你的3D魔方？

说到渐变，偶然之间发现了一个有意思的东西 hue-rotate ，它能在你初始的颜色基础上旋转元素的色调及其内容，从而达到不同的效果。了解更多

hue-rotate: The hue-rotate() CSS function rotates the hue of an element and its contents. Its result is a <filter-function>.

原荐如何用CSS3画出懂你的3D魔方？

** 上 ** - " 最 "：

.cube-inner .single-side.s1{
    /*s1顶部*/
    left:0;top:-200px;
    background: radial-gradient(circle, rgba(255,255,255,.88), #00adff);
    background: -webkit-radial-gradient(circle, rgba(255,255,255,.88), #00adff);
    transform-origin:bottom;
    -webkit-transform-origin:bottom;
    transform:rotateX(90deg);
    -webkit-transform:rotateX(90deg);
}

原荐如何用CSS3画出懂你的3D魔方？

** 正面 ** - " 懂 "：
- 下面就是默认的，什么都不用设置，所以就不展示了 ;
** 下面 ** - " 你 "：
- 即底部，底部的设置，正好跟顶部它是相反的，一个origin 以 bottom为基准为坐标，一个以top为基准为坐标;

.cube-inner .single-side.s3{
    /*s3底部*/
    left:0;top:200px;
    background: radial-gradient(circle, rgba(255,255,255,.88), #100067);
    background: -webkit-radial-gradient(circle, rgba(255,255,255,.88), #100067);
    transform-origin:top;
    -webkit-transform-origin:top;
    transform:rotateX(-90deg);
    -webkit-transform:rotateX(-90deg);
}

原荐如何用CSS3画出懂你的3D魔方？

** 背面 ** - " 的 "：
- 即正面的后边，整体旋转了 135deg，让背面更直观能看到;
- translateZ 、rotateX 同时移动，形成透视的关系，让它看起来，在正面面的后面;
- 下图二，把默认的正面，设置了透明度，可以看出，背面的透视效果;

.cube-inner .single-side.s4{
    /*s4背部*/
    z-index:2;
    left:0;top:0;
    background: radial-gradient(circle, rgba(255,255,255,.88), #F0C);
    background: -webkit-radial-gradient(circle, rgba(255,255,255,.88), #F0C);
    transform:translateZ(-200px) rotateX(180deg) ; 
    -webkit-transform:translateZ(-200px) rotateX(180deg) ; /*rotateZ(-180deg) 左右旋转的时候，Z轴旋转180°，因为字是倒着的*/
}

原荐如何用CSS3画出懂你的3D魔方？

** 左侧面 ** - " 魔 "：
- origin以right为基准，left负元素的宽度，rotateY轴旋转90deg;

.cube-inner .single-side.s5{
    /*s5左侧*/
    left:-200px;top:0;
    background: radial-gradient(circle, rgba(255,255,255,.88),rgba(33,33,33,1));
    background: -webkit-radial-gradient(circle, rgba(255,255,255,.88),rgba(33,33,33,1));
    transform-origin:right;
    -webkit-transform-origin:right;
    transform:rotateY(-90deg)
    -webkit-transform:rotateY(-90deg)
}

原荐如何用CSS3画出懂你的3D魔方？

** 右侧面 ** - " 方 "：
- 同理右侧，与左侧正好相反;

.cube-inner .single-side.s6{
    /*s6右侧*/
    right:-200px;top:0;
    transform-origin:left;
    -webkit-transform-origin:left;
    background: radial-gradient(circle, rgba(255,255,255,.88), #f00);
    background: -webkit-radial-gradient(circle, rgba(255,255,255,.88), #f00);
    transform:rotateY(90deg);
    -webkit-transform:rotateY(90deg);
}

原荐如何用CSS3画出懂你的3D魔方？

小结：嗯,以上魔方的6个面的绘制过程，基本已经完成，主要在在于 transform-origin 、 rotate 、 translate 等属性的应用，但为了让它更炫酷一些，我们还要给边角加一些光感。

∙ 添加高光：

细心的宝宝，前面的布局应该已经发现了，每一行布局的 p 标签里，都多套了一层 span ，就是为高光光感，埋下的伏笔，一个平面正方形有四个边，after、before只有两，那么肯定要再套一层，当然方法很多，比如直接用border也是可以的，但比较麻烦，我就选择了现在要讲的这种：
after、before设置1px的边框，设置一个线性渐变，中间是白色，两断是过渡到透明的，这样高光就有了，来看一组图吧：

原荐如何用CSS3画出懂你的3D魔方？

∙ CSS 360°旋转：

animation
keyframes

.cube .cube-inner{ 
  /*-webkit-transform:rotateX(180deg) rotateY(0deg) ;*/
  animation: elfCube 10s infinite ease-in-out;
  -webkit-animation: elfCube 10s infinite ease alternate;
}

@keyframes elfCube {
  0% { 
    transform: rotateX(0deg) rotateY(0deg); 
  }
  50% { 
    transform: rotateX(360deg) rotateY(360deg); 
  }
  100% { 
    transform: rotateX(0deg) rotateY(0deg); 
  }
}
@-webkit-keyframes elfCube {
  0% {
   -webkit-transform: rotateX(0deg) rotateY(0deg); 
  }
  50% {
   -webkit-transform: rotateX(360deg) rotateY(360deg); 
  }
  100% { 
    transform: rotateX(0deg) rotateY(0deg); 
  }
}

原荐如何用CSS3画出懂你的3D魔方？

∙ 跟随鼠标旋转：

说好的随着鼠标旋转呢？？
别慌，接下来就是带你装逼，带你飞的时候，
- 首先我们要了解，鼠标在容器内所在的位置，X = e.pageX - ele.offsetLeft, Y = e.pageY - ele.offsetTop;
- 同时要知道元素内的中心点：centerX = width/2,centerY =height/2;
- 然后得出值：axisX = X - centerX，axisY = Y - centerY;
- PS ：开始尝试想的是鼠标从哪个方向进入，得到它的角度，但发现旋转效果不明显，有兴趣的同学可以尝试一下：(((Math.atan2(Y, X) * (180 / Math.PI)) + 180) / 90)，参考司徒大神的 JS判断鼠标从什么方向进入一个容器 ;
- 最后，给容器绑上事件： mouseover 、 mousemove 、 mouseout ，鼠标进入时，暂停css的动画，不然会相互打架哦！

原荐如何用CSS3画出懂你的3D魔方？

……
getAxisX(e){
  let left = this.cubeEle.offsetLeft;
  return e.pageX - left - (this.cubeW/2) * (this.cubeW>this.cubeH ? this.cubeH/this.cubeW : 1);
}
getAxisY(e){
  let top = this.cubeEle.offsetTop;
  return e.pageY - top - (this.cubeH/2) * (this.cubeH>this.cubeW ? this.cubeW/this.cubeH : 1);
}
 …………

…………
run(){
  this.cubeEle.addEventListener('mouseover',(e)=>this.hoverOut(e),false);
  this.cubeEle.addEventListener('mousemove',(e)=>this.move(e),false);
  this.cubeEle.addEventListener('mouseout',(e)=>this.hoverOut(e),false);
}
hoverOut(e){
  //进入/离开
  e.preventDefault();
  this.axisX = this.getAxisX(e),
  this.axisY = this.getAxisY(e);

  if(e.type == 'mouseout'){ //离开
    this.axisX=0;
    this.axisY = 0;
    console.log("离开")
    this.cubeInner.className="cube-inner running";
  }else{
    this.cubeInner.className="cube-inner";
    console.log("进入")
  };
  let rotate = `rotateX(${-this.axisY}deg) rotateY(${-this.axisX}deg)`;
  this.cubeInner.style.WebkitTransform = this.cubeInner.style.transform = rotate;
}
 ……

结尾：

-webkit-perspective，
-webkit-transform-style，
-webkit-transform-origin，
radial-gradient、linear-gradient，
transform：rotate、translate、scale，
transition，
animation;
以上就是今天为大家带来的分享，以及使用到的知识点的API，如文章中有不对之处，烦请各位大神斧正，更多资源可下方 公Z号 哦！
文章源码获取-> blog-resource
想直接在线预览

原荐如何用CSS3画出懂你的3D魔方？

作者：苏南 - 首席填坑官

链接： https://honeybadger8.github.io/blog/

交流：912594095、GZ好： honeyBadger8

本文原创，著作权归作者所有。商业转载请联系 @IT·平头哥联盟 获得授权，非商业转载请注明原链接及出处。

原荐如何用CSS3画出懂你的3D魔方？

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

浅薄

[美] 尼古拉斯·卡尔 / 刘纯毅 / 中信出版社 / 2010-12 / 42.00元

《浅薄：互联网如何毒化了我们的大脑》在我们跟计算机越来越密不可分的过程中，我们越来越多的人生体验通过电脑屏幕上闪烁摇曳、虚无缥缈的符号完成，最大的危险就是我们即将开始丧失我们的人性，牺牲人之所以区别于机器的本质属性。——尼古拉斯•卡尔“谷歌在把我们变傻吗？”当尼古拉斯•卡尔在发表于《大西洋月刊》上赫赫有名的那篇封面文章中提出这个问题的时候，他就开启了人们热切渴望的期盼源泉，让人急于弄清楚互联网是在......一起来看看《浅薄》这本书的介绍吧!

码农工具

原荐如何用CSS3画出懂你的3D魔方？

前言

绘制过程：

∙ API预热：

∙ 绘制6个面：

∙ 添加高光：

∙ CSS 360°旋转：

∙ 跟随鼠标旋转：

结尾：

浅薄

URL 编码/解码

SHA 加密

Markdown 在线编辑器

原 荐 如何用CSS3画出懂你的3D魔方？

前言

绘制过程：

∙ API预热 ：

∙ 绘制6个面 ：

∙ 添加高光 ：

∙ CSS 360°旋转 ：

∙ 跟随鼠标旋转 ：

结尾：

浅薄

URL 编码/解码

SHA 加密

Markdown 在线编辑器

原荐如何用CSS3画出懂你的3D魔方？

∙ API预热：

∙ 绘制6个面：

∙ 添加高光：

∙ CSS 360°旋转：

∙ 跟随鼠标旋转：