点点动画~画出懂你的3D魔方
作者:首席填坑官∙苏南
来源:@IT·平头哥联盟
公众号:honeyBadger8
前言
最近在写《点点动画系列》文章,上一期分享了< 手把手教你如何绘制一辆会跑的车 >,本期给大家带来是结合CSS3画出来的一个立体3d魔方
,结合了js
让你随心所欲想怎么转,就怎么转,这里是 @IT·平头哥联盟,我是首席填坑官
∙苏南(South·Su),我们先来看看效果,然后再分解它的实现过程吧
绘制过程:
好吧,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>复制代码
- !!!发生了什么??是不是很吃惊??说好的值越大,透视效果越强的呢?后面明明藏了个妹子,怎么看没有透视出来?
- 开始我也是跟你一样吃惊的,但瞬间就悟透了,少了
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;
}复制代码
- 既然API有效,那么拉下来我们就画出6个面吧,按:上、正面、下、背面、左、右,这个顺序来设置吧;
- 首先,我们要指定它们是在三维空间内的
preserve-3d
,也就是6个面的父级要设置transform-style
样式; - 以上都设置好后,再来看看6个面吧,为了便于区分,给它们每个都设置了不同颜色(用了css3的渐变
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);
}
复制代码
正面 - "
懂
":- 下面就是默认的,什么都不用设置,所以就不展示了 ;
下面 - "
你
":- 即底部,底部的设置,正好跟顶部它是相反的,一个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);
}
复制代码
- 背面 - "
的
":- 即正面的后边,整体旋转了 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°,因为字是倒着的*/
}
复制代码
- 左侧面 - "
魔
":- 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)
}
复制代码
- 右侧面 - "
方
":- 同理右侧,与左侧正好相反;
.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也是可以的,但比较麻烦,我就选择了现在要讲的这种: - after、before设置1px的边框,设置一个线性渐变,中间是白色,两断是过渡到透明的,这样高光就有了,来看一组图吧:
∙ CSS 360°旋转 :
- 上面是一个鼠标经过的过渡动画,可以看出立体效果是已经有了,接下来就写一个CSS
animation
的动画,让它360度旋转,每个角都能看到,这样会显的很666; - 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); }
}
复制代码
∙ 跟随鼠标旋转 :
- 说好的随着鼠标旋转呢??
- 别慌,接下来就是带你装逼,带你飞的时候,
- 首先我们要了解,鼠标在容器内所在的位置,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的动画,不然会相互打架哦!
……
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,如文章中有不对之处,烦请各位大神斧正,也欢迎关注下方的
公众号
。 - 文章源码获取-> blog-resource ?
- 想直接在线预览 ?
作者:苏南 - 首席填坑官
交流群:912594095,公众号:
honeyBadger8
本文原创,著作权归作者所有。商业转载请联系
@IT·平头哥联盟
获得授权,非商业转载请注明原链接及出处。
点点动画~画出懂你的3D魔方相关推荐
- 15岁辍学的他,竟画出如此惊人的3D涂鸦
转自:美术志 15岁辍学的他,竟画出如此惊人的3D涂鸦 街头艺术赋予毫无生气的城市混凝土墙生命的活力,又有几位艺术家能有如此炉火纯青的技艺呢? -美术志出品- Odeith 出生于葡萄牙,15岁辍 ...
- android层级关系图,画出 View 的层级 3D 图和树形图来分析层级关系
HierarchyLayout 介绍 HierarchyLayout是一个自定义的ViewGroup工具,用于分析视图的层级关系,并画出层级树的结构图和可交互的3D 层级View: HiearchyL ...
- 人体姿态估计中的可视化---画出预测关节位置3D图和地面真实图
根据模型预测关节位置和真实关节位置画3维图 import pickle import tensorflow as tfimport matplotlib matplotlib.use('TkAgg') ...
- html js3d魔方,使用CSS3一个3D魔方详解~
前言 最近在写<动画点点系列>文章,上一期分享了< 手把手教你如何绘制一辆会跑车 >,本期给大家带来是结合CSS3画出来的一个立体3d魔方,结合了js让你随心所欲想怎么转,就怎 ...
- 纯CSS3画出小黄人并实现动画效果
前言 前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...
- css 画小黄人,纯CSS3画出小黄人并实现动画效果
前言 前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...
- html设计动画小黄人,纯CSS3画出小黄人并实现动画效果_html/css_WEB-ITnose
原文出处: 郭锦荣 前言前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效 ...
- matlab 渲染效果,如何用Matlab快速画出带有3D渲染效果的复杂曲面
Matlab是一个很常用的理工科数学软件,我们平常会用它来画一些平面函数或者简单的曲线或者简单的3D平面图,但是通常很少用到它的稍微高级一点的画图功能.这里介绍一些高级渲染功能和画图技巧,先看结果. ...
- html设计动画小黄人,纯CSS3画出小黄人并实现动画效果
前言 前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...
- python怎样画立体图形-用python来画出高光谱遥感影像的3D立体图
这几天需要画出高光谱遥感影像,踩了不少坑,资料真的少得可怜.虽然没有完全搞懂,总归是尝试着画出来了.所以在这里把我遇到的问题罗列一下,仅供参考,如有不足,欢迎大家指正补充. 1.先来贴出我当时看到的第 ...
最新文章
- Java项目:在线旅游系统(java+jsp+SSM+Spring+mysql+maven)
- AVR系列之ADC转换
- Eclipse集成Tomcat:6个常见的”how to”问题
- 华为畅享8可以云闪付吗_华为畅享8、魅族16X、海信彩墨屏阅读手机A5C对比
- 解决sql 2000不能安装的问题。
- dependencies 和 devDependencies 区别
- html字段隐藏,如何刮取动态隐藏的HTML字段(UuViewState)值?
- mysql升级准备工作
- Java配置环境变量、方法和原因
- nginx中配置虚拟主机
- 《Crazy sand》感人的沙画艺术
- [2018.10.15 T3] 数列
- 官方授权正版老牌截图工具 Ashampoo Snap 12 中文网站 屏幕截图与视频录制工具
- ajax英文翻译,Ajax[埃阿斯]英文名的中文翻译意思、发音、来源及流行趋势-千代英文名...
- 唤客猫获客营销之全员激励
- 世界各地的标志性建筑物
- 从B站、爱奇艺、映客的IPO上市,看国内视频公司的内容审核现状
- 大一计算机专业学期计划范文,大一学期的个人学习计划范文(精选5篇)
- 《初级会计实务》考试学习分享之第八章 ——政府会计基础【考试大纲】
- google正在等待cnd.bootcss.com的响应
热门文章
- 【附源码】计算机毕业设计java医院人事及科室病区管理设计与实现
- 金蝶软件界面文字全部变为乱码解决办法
- 输入身高体重测身材_【测试】你的身材标准吗? 附赠20-39岁成年人身高体重评分标准...
- Eclipse WTP (Web Tools Platform)
- Nginx学习八:虚拟主机
- FFmpeg源代码简单分析 结构体成员管理系统-AVClass
- 【数据结构】哈希(Hash)
- c语言静态变量的特点,静态变量有什么特点
- win8卸载java环境_Win8.1系统如何解压/卸载install.wim文件
- 兜儿.生活(三)之《太阳照常升起》杜兜儿版