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安装教程_单机（含Java、ssh安装配置）
文章更新于:2020-3-24 按照惯例,需要的文件附上链接放在文首 文件名:Java SE Development Kit 8u241 文件大小:72 MB+ 下载链接:https://www.or ...
- wireshark抓包实战（二），第一次抓包
1.选择网卡. 因为wireshark是基于网卡进行抓包的,所以这时候我们必须选取一个网卡进行抓包.选择网卡一般有三种方式 (1)第一种 当我们刚打开软件是会自动提醒您选择,例如: (2)第二种 这时 ...
- SQL基础系列(2)-内置函数--转载w3school
1. 日期函数 Mssql: SELECT GETDATE() 返回当前日期和时间 SELECT DATEPART(yyyy,OrderDate) AS OrderYear, DATEPART( ...
- split(" {1,}") 含义
将字符串按照括号内的内容分割成字符数组 这里括号内是正则表达式,X{m,n}代表X至少重复m次,至多重复n次 这里x为空格,至少重复1次,就是将字符串以一个或多个空格分割 如"1 2 ab ...
- Angular input / ion-input ion-searchbar 实现软件盘换行 改 搜索 并且触发搜索方法 Android iOS适用
Angular 实现软件盘 换行 改 搜索 并且除非 搜索方法: Form 必须有 action="javascript: return true;” input / ion-in ...
- 生成3D多棱柱的方法（3D立体图片）
先上一个效果图 主要运用的技术点就是 确认基点,确认每个盒子旋转的度数 3D变换 transform: rotateY(-360deg); 景深 perspective 3D舞台 transfor ...
- Java 基础增强
jdk与jre 要想深入了解Java必须对JDK的组成, 本文对JDK6里的目录做了基本的介绍,主要还是讲解 了下JDK里的各种可执行程序或工具的用途 Java(TM) 有两个平台 JRE 运行平台, ...
- SQL入门，就这么简单
随着时代的发展,人类活动产生的信息越来越多,大家常说,现在这个时代是大数据时代.在这样一个前提下,数据的存储成为我们必须要认真对待和研究的问题了.SQL(Structured Query Langua ...
- deepin右键发送博客
1. 概述 deepin系统上没有像样的笔记软件.为知笔记未提供deb打包的软件,很遗憾.商店提供的软件,界面停留在上个世纪了. 这个时候如果想通过笔记来分享到博客是一件非常困难的事情. 本篇博客就是 ...
- python列表简介
什么是列表?如何使用列表?https://docs.python.org/3/library/stdtypes.html#sequence-types-list-tuple-range 列表相关知识: ...