css3实现立方体,并且自转效果
先是HTML 一个父div包含四个绝对定位的div
- <div class='container container--realistic'>
- <div class='cube cube--ani'>
- <div class='face'>1</div>
- <div class='face'>2</div>
- <div class='face'>3</div>
- <div class='face'>4</div>
- </div>
- </div>
首先,一个静态的立方体
- .face:nth-child(1) {
- -webkit-transform: /*rotateY(0deg)*/ translateZ(2.5em /* half the side length, 5em in this case */);
- }
- .face:nth-child(2) {
- -webkit-transform: rotateY( 90deg) translateZ(2.5em);
- }
- .face:nth-child(3) {
- -webkit-transform: rotateY(180deg) translateZ(2.5em);
- }
- .face:nth-child(4) {
- -webkit-transform: rotateY(270deg) translateZ(2.5em);
- }
让立方体转起来
- .cube--ani {
- -webkit-animation: rot 4s linear infinite;
- }
- @-webkit-keyframes rot {
- to { -webkit-transform: rotateY(-330deg) rotateX(370deg); }
- }
这里定义了一个动画 rot
从起始位置转动到 Y轴-330deg X轴370deg
并且循环无限次,每次4s
OK!
css3实现立方体,并且自转效果的更多相关文章
- 第102天:CSS3实现立方体旋转
CSS3实现立方体旋转 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- 使用 CSS3 动感的图片标题动画效果【附源码下载】
在网站中,有很多地方会需要在图片上显示图片标题.使用 CSS3 过渡和变换可以实现动感的鼠标悬停显示效果.没有使用 JavaScript,所以只能在支持 CSS3 动画的现代浏览器中才能正常工作.您可 ...
- Codrops 教程:基于 CSS3 的精美模态窗口效果
Codrops 分享了漂亮的模态窗口效果实现方法,希望给前端开发人员提供一些创新显示对话框的启示.这个方案使用了触发按钮(或任何的 HTML 元素),在点击的时候出现一个模态窗口,带有简单的过渡(或动 ...
- 使用 jQuery & CSS3 实现优雅的手风琴效果
手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果.今天,我们将创造一个优雅的手风琴内容效果.这个想法是有悬停时滑出一些垂直手风琴标签.我们将添加一些 CSS3 属性来提升外 ...
- 使用css3来实现边框圆角效果
经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然borde ...
- css3的滤镜模糊的效果
最近在做一个css3的滤镜模糊的效果,但是我发现,有些浏览器一点效果都没有,这是浏览器兼容性导致的,怕今后会忘记所以就先写下来,也希望可以帮到需要的小伙伴. 代码如下: div{//设置半透明滤镜效果 ...
- CSS3实现8种Loading效果【第二波】
原文:CSS3实现8种Loading效果[第二波] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! PS:若要转载请注明出处,尊 ...
- css3实现色子自动翻转效果
原文:css3实现色子自动翻转效果 css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的 ...
- CSS3实战开发:使用CSS3实现photoshop的过滤效果
原文:CSS3实战开发:使用CSS3实现photoshop的过滤效果 我们知道,使用Photoshop来调整图像的亮度和对比度,或者将图片转化为灰度等等是很常见的功能.今天我将给大家介绍几个新特性,我 ...
- CSS3下的渐变文字效果实现
如下,第一种方法已实践 一.方法一:借助mask-image属性 可以狠狠地点击这里:CSS3下的渐变文字效果方法一demo 如果您手头上的浏览器是Chrome或是Safari,则您可以在demo页面 ...
随机推荐
- Linux iptables:场景实战一
<Linux iptables:规则原理和基础>和<Linux iptables:规则组成>介绍了iptables的基础及iptables规则的组成,本篇通过实际操作进行ipt ...
- Bootstrap 按钮组
连在一起的按钮:.btn-group <div class="btn-group" role="group"> <button class=& ...
- dva 笔记
最简单的结构 // 创建应用 const app = dva(); // 注册 Model app.model({ namespace: 'count', state: 0, reducers: { ...
- Android通过php插入查询SQL数据库
PHP代码 <?php header("Content-type: text/html; charset=gb2312"); $serverName = "loca ...
- 最常用的8款 PHP 调试工具,你用过吗?
Web 开发并不是一项轻松的任务,有超级多服务端脚本语言提供给开发者,但是当前 PHP 因为具有额外的一些强大的功能而越来越流行.PHP 是最强大的服务端脚本语言之一,同时也是 Web 开发者和设计者 ...
- iframe子夜页面调父页面的方法 取父页面的值
1.调父页面的方法的写法 window.parent.yincang();//yincang()是父页面的一个方法 2.取父页面的值的写法 window.parent.document.gettEle ...
- vue安装说明
1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html) --以下操作在nodejs安装路径下进行(记得不要在C盘)-- ...
- wordpress 模板制作之一
WP模板工作原理图:
- PHP7+Nginx的配置与安装教程详解
下面脚本之家小编把PHP7+Nginx的配置与安装教程分享给大家,供大家参考,本文写的不好还请见谅. 系统环境:centos6.5 x64 软件版本:nginx-1.10.0 php-7.0.6 安装 ...
- 数据库与sql注入的相关知识
数据库与sql注入的相关知识 sql语句明显是针对数据库的一种操作,既然想通过sql注入的方法来拿取数据那么就要先了解一下如何的去操作数据库,这方面并不需要对数据库有多么的精通但是如果了解掌握了其中的 ...