CSS3轻松实现彩色旋转六面体动画
一、效果预览：
二、基本思路：
1、首先这个一个自动触发的动画，因此应使用animation设计，包括自动组装和组装完成后自动旋转的过程；
2、当鼠标放上去的时候六个面及上面的字体均变色，应在六个面设置一个transition触发动画，触发条件为父元素的hover。
三、实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转六面体动画</title>
<style>
body{
margin: 0;/*清除默认外边距*/
}
.m-frame{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);/*实现垂直水平均居中*/
perspective: 550px;/*在画框上设置透视*/
}
.m-frame .canvas{
position: relative;
width: 300px;
height: 300px;
animation: canvas 2s linear 12s infinite;
transform-style: preserve-3d;/*让子元素保留3d效果*/
}
.m-frame .canvas .side{
position: absolute;
width: 100%;
height: 100%;
border: 1px solid black;
text-align: center;/*文字水平居中*/
line-height: 300px;/*文字垂直居中*/
transition: all 0.3s linear 0s;
}
.m-frame .canvas .side{
animation: top 2s 0s forwards;
}
.m-frame .canvas .bottom{
animation: bottom 2s 2s forwards;
}
.m-frame .canvas .left{
animation: left 2s 4s forwards;
}
.m-frame .canvas .right{
animation: right 2s 6s forwards;
}
.m-frame .canvas .back{
animation: back 2s 8s forwards;
}
.m-frame .canvas .front{
animation: front 2s 10s forwards;
}
@keyframes top{
from{
transform: rotateX(0deg);
}
to{
transform: rotateX(90deg) translateZ(150px);
}
}
@keyframes bottom{
from{
transform: rotateX(0deg);
}
to{
transform: rotateX(-90deg) translateZ(150px);
}
}
@keyframes left{
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(-90deg) translateZ(150px);
}
}
@keyframes right{
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(90deg) translateZ(150px);
}
}
@keyframes back{
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(-180deg) translateZ(150px);
}
}
@keyframes front{
from{
transform: rotateY(0deg);
}
to{
transform: translateZ(150px);
}
}
@keyframes canvas{
from{
transform: rotate3d(1,1,1,0);
}
to{
transform: rotate3d(1,1,1,360deg);
}
}
.m-frame .canvas:hover .side{
color: white;
}
.m-frame .canvas:hover .front{
background-color: rgba(128,0,128,0.7);
}
.m-frame .canvas:hover .bottom{
background-color: rgba(0,128,0,0.7);
}
.m-frame .canvas:hover .left{
background-color: rgba(0,255,255,0.7);
}
.m-frame .canvas:hover .right{
background-color: rgba(0,0,255,0.7);
}
.m-frame .canvas:hover .top{
background-color: rgba(255,165,0,0.7);
}
.m-frame .canvas:hover .back{
background-color: rgba(255,0,0,0.7);
}
</style>
</head>
<body>
<div class="m-frame"><!--画框-->
<div class="canvas"><!--画布-->
<div class="side top">城会玩</div>
<div class="side bottom">单身狗</div>
<div class="side left">你是个好人,我们不适合</div>
<div class="side right">皮皮虾，我们走</div>
<div class="side back">王者农药kengB队友</div>
<div class="side front">资深宅男技术控</div>
</div>
</div>
</body>
</html>
四、实践中的一些总结：
1、尽量使代码易阅读，但也使代码量显得较大，或许有优化的方法；
2、在鼠标悬停时，变色过程伴有一定的卡顿，猜想是动画本就比较占用资源，变色操作时重新渲染导致资源占用更大。我采用了将变色的时间设成0.3s这样很小的数，可以使渲染过程快速结束，使得卡顿不太明显。实测如果变色过程时间设得越大，卡顿持续越久。
3、设置画框的原因：
实测在画布上设置perspective时，旋转过程不是正方体形状。这里大胆推测，旋转设置在画布上，这使得视点和画布表面的距离始终在变动中，由于远大近小，故而不会显示成正方体。在画框上透视时，视点距画框的位置始终是一定的。
4、组装过程的另一种实现：
上下左右各面由div分别绕上、下、左、右边旋转90度，不再进行Z轴上的平移，后面旋转180度，前面平移一样可以完成，但得到的效果与上面有差异，不够对称。
CSS3轻松实现彩色旋转六面体动画的更多相关文章
- 用css3实现摩天轮旋转的动画效果
用css3实现摩天轮旋转的动画效果 1.CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes 规则.@keyframes 规则用于创建动画.在 @keyf ...
- 用CSS3制作的旋转六面体动画
这是用CSS3制作的旋转的六面体 请用火狐或谷歌浏览器预览,有些旋转角度做的不够好,请大神指教 top bottom left right front back
- 纯CSS3超酷3D旋转立方体动画特效
简要教程 这是一款神奇的纯 CSS3 立方体动画特效插件.使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转.翻转动画, CSS3 展现了它无穷的魅力.使 ...
- 纯CSS3悬停图标旋转导航动画代码
分享一款纯CSS3悬停图标旋转导航动画代码.这是一款鼠标移到图标上动画旋转显示导航菜单.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="x_con ...
- CSS3实现3D木块旋转动画
CSS3实现3D木块旋转动画,css3特效,旋转动画,3D,立体效果,CSS3实现3D木块旋转动画是一款迷人的HTML5+CSS3实现的3D旋转动画. 代码下载:http://www.huiyi8.c ...
- CSS3与页面布局学习总结（六）——CSS3新特性（阴影、动画、渐变、变形、伪元素等）
CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档. 一.阴影 1.1.文字阴影 text-shadow&l ...
- 详解用CSS3制作圆形滚动进度条动画效果
主 题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...
- CSS3与页面布局学习笔记（六）——CSS3新特性（阴影、动画、渐变、变形( transform)、透明、伪元素等）
一.阴影 1.1.文字阴影 text-shadow<length>①: 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 <length>②: 第2个长度值用来设置对象的阴 ...
- 使用 CSS3 & jQuery 制作漂亮的书签动画
今天的教程是关于创建使用 CSS 旋转变换和 JavaScript 制作动画书签效果.我们的想法是展现出样书状结构,使单一的色板或列表点击切换.当点击其中一项,我们就会旋转以显示所选择的项目. 在线演 ...
随机推荐
- python--装饰器、生成器、迭代器、元类
一.装饰器 def w1(func): def inner(): func() return inner @w1 def f1(): ') 1.只要python解释器执行到装饰器,就会自动进行装饰,而 ...
- pycharm 永久激活方法
打开终端,执行: cd /etc/ sudo vim hosts 在最后一行加上: 0.0.0.0 account.jetbrains.com 打开pycharm,选择Activation Code ...
- PHPDocumentor2.8.5 安装，使用及快速上手
PHPDocumentor当前版本是phpDocumentor-2.8.5.tgz 关于PHPDocumentor有什么用,还有其历史,我就不介绍了,直接进入正题.老版本的叫PHPDoc,从1.0开始 ...
- 实战|使用Spark Streaming写入Hudi
欢迎关注微信公众号:ApacheHudi,解锁下一代数据湖技术 1. 项目背景 传统数仓的组织架构是针对离线数据的OLAP(联机事务分析)需求设计的,常用的导入数据方式为采用sqoop或spark定时 ...
- 前端笔记（关于css盒模型知识整理）
我以前整理的文章可能也不是特别深入.所以现在开始尝试即使多花点时间收集整理,也不只发浅层知识,这样对技术的深入理解是很有帮助的. 废话不多说,我们现在开始. 说到css盒模型,这是大多面试基础中会经常 ...
- 用python画出全球疫情趋势变化图
前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:谦睿科技 PS:如有需要Python学习资料的小伙伴可以加点击下方链接 ...
- 数据结构与算法--堆(heap)与栈(stack)的区别
堆和栈的区别 在C.C++编程中,经常需要操作的内存可分为以下几个类别: 栈区(stack):由编译器自动分配和释放,存放函数的参数值,局部变量的值等,其操作方式类似于数据结构中的栈. 堆区(heap ...
- 教你如何入手用python实现简单爬虫微信公众号并下载视频
主要功能 如何简单爬虫微信公众号 获取信息:标题.摘要.封面.文章地址 自动批量下载公众号内的视频 一.获取公众号信息:标题.摘要.封面.文章URL 操作步骤: 1.先自己申请一个公众号 2.登录自己 ...
- C#开发BIMFACE系列32 服务端API之模型对比3：批量获取模型对比状态
系列目录 [已更新最新开发文章,点击查看详细] 在<C#开发BIMFACE系列31 服务端API之模型对比2:获取模型对比状态>中介绍了根据对比ID,获取一笔记录的对比状态.由于模 ...
- vue如何添加jquery？
1.首选通过npm安装jquery? 2.在build/webpack.base.conf文件当中引入jquery <pre>module.exports = { ... resolve: ...