点击上方'IT平头哥联盟 '关注这众号~
最近在写《每周动画点点系列》文章,上一期分享了< 手把手教你如何绘制一辆会跑车 >,本期给大家带来是结合CSS3画出来的一个 立体3d魔方
,结合了 js
让你随心所欲想怎么转,就怎么转,这里是 @IT·平头哥联盟,我是 首席填坑官
∙苏南(South·Su),我们先来看看效果,然后再分解它的实现过程吧
好吧,gif图看着好像有点不是很清晰,想在线预览的同学,可在下方留言获取链接(微信不支持链接)?,废话不多扯了,先来分析一下,看如何实现这个功能吧。
-webkit-perspective
-透视、 preserve-3d
-三维空间,这个两个是重点哦,当然还有 transform-origin
、 transition
、 transform
等,先来回故一下 API 怎么是讲的吧:perspective 取值 :
透视效果
。「z>0」的三维元素比正常大,而「z<0」时则比正常小,大小程度由该属性的值决定,不允许负值。transform-style 取值 :
preserve-3
d时,元素将会创建局部堆叠上下文;preserve-3d
。transform-origin 取值 :
/* 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;
…………
}
<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>
rotate
,加个它再来看看效果吧:.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;
}
preserve-3d
,也就是6个面的父级要设置 transform-style
样式;radial-gradient
)——不想手写的同学推荐一个网站可在线设置你要的效果,复制样式即可,先来一睹风采,为了便于观察,整体角度旋转了10deg:hue-rotate
,它能在你初始的颜色基础上旋转元素的色调及其内容,从而达到不同的效果。了解更多hue-rotate : The hue-rotate() CSS function rotates the hue of an element and its contents. Its result is a .
最
":.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);
}
懂
":你
":.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);
}
的
":.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°,因为字是倒着的*/
}
魔
":.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)
}
方
":.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);
}
小结 : 嗯,以上魔方的6个面的绘制过程,基本已经完成,主要在在于
transform-origin
、rotate
、translate
等属性的应用,但为了让它更炫酷一些,我们还要给边角加一些光感。
p
标签里,都多套了一层 span
,就是为高光光感,埋下的伏笔,一个平面正方形有四个边,after、before只有两,那么肯定要再套一层,当然方法很多,比如直接用border也是可以的,但比较麻烦,我就选择了现在要讲的这种:animation
的动画,让它360度旋转,每个角都能看到,这样会显的很666;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);
}
}
mouseover
、 mousemove
、 mouseout
,鼠标进入时,暂停css的动画,不然会相互打架哦!……
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;
}
……
作者说
您好,我是苏南,非常感谢您认真的看完这遍文章,如果您觉得文章不错,请记得点个赞,并关注下方的 公众号
,支持一下我们!
用心分享 做有温度的攻城狮