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 制作动画书签效果.我们的想法是展现出样书状结构,使单一的色板或列表点击切换.当点击其中一项,我们就会旋转以显示所选择的项目. 在线演 ...
随机推荐
- Hadoop （六）：MapReduce基本使用
MapReduce原理 背景 因为如果要对海量数据进行计算,计算机的内存可能会不够. 因此可以把海量数据切割成小块多次计算. 而分布式系统可以把小块分给多态机器并行计算. MapReduce概述 Ma ...
- 关于Git我们不得不知道的事（一）
一.什么是Git? Git是目前世界上最先进的分布式版本控制系统(没有之一). Git可以协助我们很方便的管理我们的项目,我们随时可以找回(或者回到)我们之前任何一个时刻的项目:还可以让同事或者开发小 ...
- MongoDB查询mgov2的聚合方法
1.多条表数据累计相加. respCount := struct { Rebatescore int64 //变量命名必须要和查询的参数一样.}{} o := bson.M{"$match& ...
- Java第三十四天，IO操作（续集），非基本对象的读写——序列化流
一.序列化与反序列化 以前在对文件的操作过程当中,读写的对象都是最基本的数据类型,即非引用数据类型.那么如果我们对饮用数据类型(即对象类型)数据进行读写时,应该如何做呢?这就用到了序列化与反序列化. ...
- Tomcat目录解析
bin 可执行文件的储存 conf 配置文件 lib 依赖jar包 logs 日志文件 temp 临时文件 webapps 创建的web应用程序 work 存放运行时数据 如何启动Tomcat? 启动 ...
- pycharm 永久激活方法
打开终端,执行: cd /etc/ sudo vim hosts 在最后一行加上: 0.0.0.0 account.jetbrains.com 打开pycharm,选择Activation Code ...
- Linux 磁盘管理篇，开机挂载
设置开机挂载需要到 /etc/fstab 里设置 第一列:磁盘设备文件名或该设备的label 第二列:挂载点 第三列:磁盘分区文件系统 第四列:文件系统参数 第五列:能否被dump备份命令作用 第六列 ...
- CVPR2020文章汇总 | 点云处理、三维重建、姿态估计、SLAM、3D数据集等(12篇)
作者:Tom Hardy Date:2020-04-15 来源:CVPR2020文章汇总 | 点云处理.三维重建.姿态估计.SLAM.3D数据集等(12篇) 1.PVN3D: A Deep Point ...
- Go中的unsafe
unsafe 最近关注了一个大佬的文章,文章写的非常好,大家可以去关注下. 微信公众号[码农桃花源] 指针类型 我们知道slice 和 map 包含指向底层数据的指针 什么是 unsafe 为什么会有 ...
- go中的线程的实现模型-P G M的调度
线程实现模型 go中线程的实现是依靠 P G M M machine的缩写.一个M代表一个内核线程,或称“工作线程” P processor的缩写.一个P代表执行一个Go代码片段所需要的资源(或称“上 ...