纯CSS做3D旋转魔方
昨天偶然看见网友（简单说 用CSS做一个魔方旋转的效果）做的一个3D旋转魔方 效果就是本博客右侧公告栏所示
在这里把做法展现出来
感兴趣的可以试试 做成自己特有的魔方
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<style>
/*最外层容器样式*/
.wrap {
width: 200px;
height: 200px;
margin: 200px;
position: relative;
} /*包裹所有容器样式*/
.cube {
width: 200px;
height: 200px;
margin: 0 auto;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(-80deg);
animation: rotate linear 20s infinite;
} @-webkit-keyframes rotate {
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
} .cube div {
position: absolute;
width: 200px;
height: 200px;
opacity: 0.8;
transition: all .4s;
} /*定义所有图片样式*/
.pic {
width: 200px;
height: 200px;
} .cube .out_front {
transform: rotateY(0deg) translateZ(100px);
} .cube .out_back {
transform: translateZ(-100px) rotateY(180deg);
} .cube .out_left {
transform: rotateY(-90deg) translateZ(100px);
} .cube .out_right {
transform: rotateY(90deg) translateZ(100px);
} .cube .out_top {
transform: rotateX(90deg) translateZ(100px);
} .cube .out_bottom {
transform: rotateX(-90deg) translateZ(100px);
} /*定义小正方体样式*/
.cube span {
display: block;
width: 100px;
height: 100px;
position: absolute;
top: 50px;
left: 50px;
} .cube .in_pic {
width: 100px;
height: 100px;
} .cube .in_front {
transform: rotateY(0deg) translateZ(50px);
} .cube .in_back {
transform: translateZ(-50px) rotateY(180deg);
} .cube .in_left {
transform: rotateY(-90deg) translateZ(50px);
} .cube .in_right {
transform: rotateY(90deg) translateZ(50px);
} .cube .in_top {
transform: rotateX(90deg) translateZ(50px);
} .cube .in_bottom {
transform: rotateX(-90deg) translateZ(50px);
} /*鼠标移入后样式*/
.cube:hover .out_front {
transform: rotateY(0deg) translateZ(200px);
} .cube:hover .out_back {
transform: translateZ(-200px) rotateY(180deg);
} .cube:hover .out_left {
transform: rotateY(-90deg) translateZ(200px);
} .cube:hover .out_right {
transform: rotateY(90deg) translateZ(200px);
} .cube:hover .out_top {
transform: rotateX(90deg) translateZ(200px);
} .cube:hover .out_bottom {
transform: rotateX(-90deg) translateZ(200px);
}
</style>
</head> <body>
<!-- 外层最大容器 -->
<div class="wrap">
<!--包裹所有元素的容器-->
<div class="cube">
<!--前面图片 -->
<div class="out_front">
<img src="http://img.blog.csdn.net/20170716094246620" class="pic" />
</div>
<!--后面图片 -->
<div class="out_back">
<img src="http://img.blog.csdn.net/20170716094334594" class="pic" />
</div>
<!--左面图片 -->
<div class="out_left">
<img src="http://img.blog.csdn.net/20170716094400013" class="pic" />
</div>
<!--右面图片 -->
<div class="out_right">
<img src="http://img.blog.csdn.net/20170716094422331" class="pic" />
</div>
<!--上面图片 -->
<div class="out_top">
<img src="http://img.blog.csdn.net/20170716094444434" class="pic" />
</div>
<!--下面图片 -->
<div class="out_bottom">
<img src="http://img.blog.csdn.net/20170716094504432" class="pic" />
</div> <!--小正方体 -->
<span class="in_front">
<img src="http://img.blog.csdn.net/20170716120759718" class="in_pic" />
</span>
<span class="in_back">
<img src="http://img.blog.csdn.net/20170716120759718" class="in_pic" />
</span>
<span class="in_left">
<img src="http://img.blog.csdn.net/20170716120759718" class="in_pic" />
</span>
<span class="in_right">
<img src="http://img.blog.csdn.net/20170716120759718" class="in_pic" />
</span>
<span class="in_top">
<img src="http://img.blog.csdn.net/20170716120759718" class="in_pic" />
</span>
<span class="in_bottom">
<img src="http://img.blog.csdn.net/20170716120759718" class="in_pic" />
</span>
</div> </div>
</body> </html>
下面是效果图
其中难点：
transform-style: preserve-3d;
使被转换的子元素保留其 3D 转换：
参考链接 http://www.runoob.com/cssref/css3-pr-transform-style.html
css动画 http://www.runoob.com/css3/css3-animations.html
摘自：http://m.blog.csdn.net/FE_dev/article/details/75142505
2017-11-30 08:26:45
纯CSS做3D旋转魔方的更多相关文章
- CSS动画之旋转魔方轮播
很久没有回头来复习CSS方面的知识了, 正好又到了月底写文章的deadline......所以这次选择了详细巩固一下CSS3动画有关的知识点,因为之前只是用过一些属性并没有深究细节. 在我自己写完这篇 ...
- 纯CSS实现3D正方体动画效果
前言 纯CSS实现3D正方体动画效果,此方法是通过transform的旋转(rotate)和位移(translate)实现的,具体效果是鼠标滑过时正方体的一个面会产生位移 效果图
- 纯css做幻灯片效果
css3里面有一个@keyframes动画功能. w3c上面的例子: 可以使用它来做一个幻灯片效果. <!DOCTYPE html> <html lang="en" ...
- 纯CSS实现3D按钮效果
今天分享一个用纯CSS实现的3D按钮.css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改box-shadow和top值.让人感觉有一种按钮被按下的感觉.css代码非常 ...
- 纯CSS实现3D图像轮转
CSS演武场今天继续,今天看一个纯css实现的3D图像轮转效果,请大家猛戳研究效果先,也可下载收藏先. 首先看html文件,div.billboard为效果的容器,利用10个div.poster分割图 ...
- 纯css做的安卓开机动画
随着css3的发展,越来越多的负责绚丽的效果可以由纯css来完成了.用css3实现的动画效果丝毫不必js实现的逊色,而且浏览器对css渲染的速度远比js快,大多数时候css的体积也不js小.其中css ...
- 纯CSS实现立方体旋转
下面为通过CSS动画实现的立方体旋转,可以改变CSS代码中关键帧定义(@keyframes)来改变立方体的旋转方式 HTML部分: <body class="body"> ...
- 纯CSS绘制3D立方体
本篇记录的是使用CSS3绘制3D立方体,并旋转起来. 我的思路: 1️⃣ 首先,用div元素画6个正方形摞在一起放在画布中间.为了区分,分别给每个div选择了不同的颜色,并且设置为半透明方便透视. 2 ...
- 纯css做三角形图标
以前做三角形图标一直是用图片,或者css3旋转,现在才发现原来还有这么简单的三角形 div { border: 10px solid transparent; border-bottom: 10px ...
随机推荐
- 牛客练习赛47 DongDong数颜色 （莫队算法）
链接:https://ac.nowcoder.com/acm/contest/904/E 来源:牛客网 DongDong数颜色 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 5242 ...
- npm上发布vue插件
1.初始化项目 vue init webpack-simple XXXXX(此处为插件名) 使用vue创建一个简单的项目,删除src中除了main.js和app.vue外的文件,清空app.vue中无 ...
- Phaserjs3 对象池随机产生炸弹并销毁 -- Html网页游戏开发
scene.js /// <reference path="../../libs/phaser/phaser.min.js"/> 'use strict'; var B ...
- jar包部署在linux上后浏览器访问不到的问题
1.首先保证程序是正常运行的 2.linux的防火墙是否关闭 3.可能是iptables里面需要设置白名单 可编辑/etc/sysconfig/iptables文件加入应用端口的白名单 修改后执行sy ...
- k8sDeployment控制器
简写为deploy,是k8s控制器的另一种实现,它构建于ReplicaSet之上,可为pod和rs资源提供声明式更新. deploy控制器资源的大部分功能均可通过调用rs来实现,同时,还增添了部分特性 ...
- nginx设置负载均衡
...... why负载均衡,随着企业业务增长和海量请求,给服务端造成海量并发,导致响应不及时需扩容后端服务,前端需要负载均衡,均摊请求,让服务端吞吐请求的能力提升 单点服务方式,一个点挂掉整个服务就 ...
- 微信里关闭窗口 js
需要在微信中关闭页面窗口,不过window.close()不管用,问过群里才知道微信有自带的方法能关闭窗口,记录一下(这个只针对微信有效哦): WeixinJSBridge.call('closeWi ...
- ubuntu搭建、安装gitlab服务器以及初始化密码
本为14.04 在搭建之前要确定其网络环境是没有问题.用root身份进行操作 1.安装和配置必要的依赖关系 apt-get update apt-get install -y curl openssh ...
- JavaWeb_(SSH论坛)_五、帖子模块
基于SSH框架的小型论坛项目 一.项目入门 传送门 二.框架整合 传送门 三.用户模块 传送门 四.页面显示 传送门 五.帖子模块 传送门 六.点赞模块 传送门 七.辅助模块 传送门 回复帖子 分析回 ...
- 【转】diamond专题（三）—— diamond架构
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...