纯CSS3超酷3D旋转立方体动画特效
简要教程
这是一款神奇的纯 CSS3 立方体动画特效插件。使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转、翻转动画, CSS3 展现了它无穷的魅力。使用CSS来制作立方体动画,代码简洁易懂,效果更是令人惊叹!下面来看看制作方法。
HTML结构
立方体结构中,使用一个wrapper div
来包裹立方体。在里面使用6个div
来制作立方体的6个面。
<div class="wrap">
<div class="cube">
<div class="front">front</div>
<div class="back">back</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</div>
立方体的每一个面都有它自己的元素。我们稍后会使用CSS来将立方体的6个面放置到正确的位置上。
CSS样式
在立方体的CSS样式中,首先要关注的是立方体的wrapper div
。为了制作3D效果,我们需要为它提供一个 CSS perspective 属性。
.wrap {
perspective: 800px;
perspective-origin: 50% 100px;
}
CSS perspective属性是一个比较复杂的CSS3属性。最好的理解它的方法是看完文档后,自己动手修改一下DEMO中的perspective
属性来看看它的变化。下面需要给包含立方体6个面的立方体的容器.cube
提供样式:
.cube {
position: relative;
width: 200px;
transform-style: preserve-3d;
}
给立方体容器200像素的宽度,并设置为相对定位,这样在它里面的立方体的6个面可以设置为绝对定位。preserve-3d
属性确保所有6个面都处于3D立体状态。在为6个面设置它们的位置之前,先给它们一些通用的样式:
.cube div {
position: absolute;
width: 200px;
height: 200px;
}
在进过上面对立方体6个面的一系列设置之后,现在我们可以为6个面制作变形效果,以使它们组装为一个立方体。
.back {
transform: translateZ(-100px) rotateY(180deg);
}
.right {
transform: rotateY(-270deg) translateX(100px);
transform-origin: top right;
}
.left {
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.top {
transform: rotateX(-90deg) translateY(-100px);
transform-origin: top center;
}
.bottom {
transform: rotateX(90deg) translateY(100px);
transform-origin: bottom center;
}
.front {
transform: translateZ(100px);
}
rotateY
的值可以旋转立方体的各个面,使上面的文字处于正确的位置上。而 translateZ
的值使元素在指定容器中向前或向后移动。translateY
的值看起来有些混乱,但是请记住,它的作用是通过透明的面板来使指定的面升高或降低来制作3D效果。每一个面都有自己的translations值来使它们处于适当的位置上。你可以自己修改一下这些值来看看效果。
水平旋转的立方体
该效果是DEMO1中的第一种效果(具体效果见文章最后动图)。我们使用关键帧技术来使立方体在水平方向上旋转:
@keyframes spin {
from { transform: rotateY(0); }
to { transform: rotateY(360deg); }
} .cube {
animation: spin 5s infinite linear;
}
是不是比想象中的要简单得多?6个面上的文字在立方体旋转时都处于正确的位置上。使用关键帧可以制作出许多神奇的动画效果。
垂直旋转的立方体
该效果是DEMO1中的第二种效果。要在垂直方向上旋转立方体只需要简单的改变动画的旋转轴为Y轴。但是这种情况下面板上的文字有时候会显示在相反的方向上,所以我们需要修改一下元素旋转的代码:
@keyframes spin-vertical {
from { transform: rotateX(0); }
to { transform: rotateX(-360deg); }
} .cube-wrap.vertical .cube {
margin: 0 auto; /* keeps the cube centered */ transform-origin: 0 100px;
animation: spin-vertical 5s infinite linear;
} .cube-wrap.vertical .top {
transform: rotateX(-270deg) translateY(-100px);
} .cube-wrap.vertical .back {
transform: translateZ(-100px) rotateX(180deg);
} .cube-wrap.vertical .bottom {
transform: rotateX(-90deg) translateY(100px);
}
扁平旋转的立方体
该效果是DEMO1中的第三种效果。该效果中移除了立方体的3D效果,每次只显示一个面。要做到只一点,我们可以从wrapper中移除perspective和原点的设置:
.wrap { /* no more perspective */
perspective: none;
perspective-origin: 0 0;
}
现在立方体每次只会显示一个面。
效果图(具体了解请看原文):
转载声明:此文章为转载,点击查看原文。如有侵权24小时内删除。联系QQ:1522025433
纯CSS3超酷3D旋转立方体动画特效的更多相关文章
- 纯CSS炫酷3D旋转立方体进度条特效
在网站制作中,提高用户体验度是一项非常重要的任务.一个创意设计不但能吸引用户的眼球,还能大大的提高用户的体验.在这篇文章中,我们将大胆的将前面所学的3D立方体和进度条结合起来,制作一款纯CSS3的3D ...
- 一款基于jQuery和CSS3炫酷3D旋转画廊特效插件
这是一款效果炫酷的jQuery和CSS3 3D旋转画廊特效插件.该3D画廊插件可以通过前后导航按钮来切换图片,效果就像旋转木马一样.它还带有点击放大图片,显示图片标题和用键盘操作等功能. 在线预览 ...
- [原创]纯CSS3打造的3D翻页翻转特效
刚接触CSS3动画,心血来潮实现了一个心目中自己设计的翻页效果的3D动画,页面纯CSS3,目前只能在Chrome中玩,理论上可以支持Safari. 1. 新建HTML,代码如下(数据和翻页后的数据都是 ...
- 使用纯CSS3实现一个3D旋转的书本
有一些前沿的电商站点已经開始使用3D模型来展示商品并支持在线定制,而当中图书的展示是最为简单的一种, 无需复杂的建模过程,使用图片和CSS3的一些变换就可以实现更好的展示效果,简洁而有用. 书本的3D ...
- 基于css3炫酷页面加载动画特效代码
基于CSS3实现35个动画SVG图标.这是一款基于jQuery+CSS3实现的SVG图标动画代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&qu ...
- 纯css3响应式3d翻转菜单
前端开发whqet,csdn,王海庆,whqet,前端开发专家 周末快乐哈,今天来看一个纯CSS3实现的3d翻转菜单.3d响应式菜单,希望对大家有所帮助. 在线赞赏效果.在线编辑代码,或者下载收藏. ...
- 纯css3圆形从中心向四周扩散动画效果
查看效果:http://hovertree.com/texiao/css3/37/ 先来个简单的示例,例如: @keyframes hovertreemove{from {top:30px;}to { ...
- 纯CSS3彩色边线3D立体按钮制作教程
原文:纯CSS3彩色边线3D立体按钮制作教程 今天我们来分享一款利用纯CSS3实现的3D按钮,这款按钮的一个特点是有彩色的边线,这让整个按钮显得比较多姿多彩,没那么枯燥无趣.本文不仅可以让大家看到演示 ...
- 16款纯CSS3实现的loading加载动画
分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div clas ...
随机推荐
- redis-deskmanager 连不上 虚拟机 - centos redis
1.没设置redis密码 : https://blog.csdn.net/HUXU981598436/article/details/54668779 2.关闭防火墙
- 0326 iframe和video experience
今天的东西确实不少,很容易混淆,input下的属性太多,form下的属性也不少,内容多点,一时不能熟练掌握,晚上多拿出点时间练练 尤其是 form 和inpu那些属性格外别扭 下午的内嵌视频相对简单主 ...
- 【python小练习】简单的猜数字游戏
简单的猜数字游戏 前两天在论坛回答问题时候,看到一个猜数字的游戏,就在原来的基础上改了一下,玩一玩. 此程序,数字范围和尝试次数是事先设定好的,当然可以通过代码修改.经过测试,由于难度过大,我在其中加 ...
- Oracle 11g 的 自动内存管理
oracle11g 设置memory_target的值,开启AMM(Auto Memory Management),剩下的Oracle就可以自动维护了 参考:1.https://www.cnblogs ...
- 围在栅栏中的爱WriteUp(附QWE密码加解密脚本)
题目的链接:http://www.shiyanbar.com/ctf/1917 1.首先题目给出的是摩尔斯电码: 在下面的网站上解密:https://www.cryptool.org/en/cto-c ...
- Linux运行时I/O设备的电源管理框架【转】
转自:https://www.cnblogs.com/coryxie/archive/2013/03/01/2951243.html 本文介绍Linux运行时I/O设备的电源管理框架.属于Linux内 ...
- ibevent 和 libev 提高网络应用性能【转】
转自:https://www.cnblogs.com/kunhu/p/3632285.html 构建现代的服务器应用程序需要以某种方法同时接收数百.数千甚至数万个事件,无论它们是内部请求还是网络连接, ...
- Kafka管理工具介绍【转】
Kafka内部提供了许多管理脚本,这些脚本都放在$KAFKA_HOME/bin目录下,而这些类的实现都是放在源码的kafka/core/src/main/scala/kafka/tools/路径下. ...
- Windowns下使用SecuretCRT编写脚本增加高亮
作者:邓聪聪 secureCRT设置高亮1)修改环境变量:export TERM=xterm-color 2)增加VIM高亮:vim ~/.vimrc set syntax=on colorsch ...
- 题解-ZJOI2015地震后的幻想乡
Problem bzoj & 洛谷 题意简述:给定一个\(n\)(\(n\leq 10\))个点\(m\)条边的无向图,每条边的权值为一个\(0\)到\(1\)之间的连续随机变量,求图的最小生 ...