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 制作动画书签效果.我们的想法是展现出样书状结构,使单一的色板或列表点击切换.当点击其中一项,我们就会旋转以显示所选择的项目. 在线演 ...
随机推荐
- 搭建 sqli SQL注入练习靶场
文章更新于:2020-02-18 按照惯例,需要的文件附上链接放在文首 文件名:sqli-labs-master.zip 文件大小:3.5 M 下载链接:https://www.lanzous.com ...
- json格式的文件操作2
1.字典转换为字符串(json.dumps) jsongeshi={"name":"yajuan","age":"10" ...
- Vue生成分享海报(含二维码)
本文已同步到专业技术网站 www.sufaith.com, 该网站专注于前后端开发技术与经验分享, 包含Web开发.Nodejs.Python.Linux.IT资讯等板块. 功能需求: 海报有1张背景 ...
- 28.4 Calendar 日历
/* * Calendar:日历,提供了一些操作年月日时的方法 * 获取 * 修改 * 添加 */ public class CalendarDemo { public static void mai ...
- vue-cli3 按需引入 element-ui 报错
报错信息: Cannot find module 'babel-preset-es2015' from .... 解决办法: 安装最新的 Babel 编译插件:@babel/preset-env 修改 ...
- AJ学IOS 之CoreLocation指南针小应用
AJ分享,必须精品 一:效果图示 简单的用到CoreLocation获取方位做的指南针小应用 二:制作思路 具体用到了CoreLocation相关的知识,请看上一篇博客有写 然后获取方向不需要进行授权 ...
- [算法]Miller-Robbin素数判定
目录 一.实现原理 二.应用 判断一个正整数是否为素数 三.小结 一.实现原理 我们以前都是怎么判断素数的呢: 试除法: 若一个正整数N为合数,则存在一个能整除N的数k,其中\(2\leqslant ...
- 使用SVGDeveloper画svg地图详细过程
使用步骤 1. 安装svg 2. 具体操作 1. 打开svg,点击file ,new,默认svg,点击ok 显示界面如下: 然后点击image 把鼠标放到代码下面的的桌面上,鼠标箭头会变成 ...
- Python递归爬取头条用户的所有文章、视频
前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. PS:如有需要Python学习资料的小伙伴可以加点击下方链接自行获取http ...
- stand up meeting 12/18/2015 ~12/20/2015(weekend)
part 组员 工作 工作耗时/h 明日计划 工作耗时/h UI 冯晓云 完成主页面设计和非功能性PDF reader UI设计实现 ...