纯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 ...
随机推荐
- VMware的linux虚拟机配置ip后无法ping通宿主机
VMware的linux虚拟机配置ip(使用eth0)后无法ping通宿主机,同样宿主机无法ping通linux虚拟机. 可能原因:linux虚拟机使用的网卡,与本机使用的网卡不同,配置成与本机一致的 ...
- 牛客练习赛44 B 小y的线段 （思维）
链接:https://ac.nowcoder.com/acm/contest/634/B 来源:牛客网 题目描述 给出n条线段,第i条线段的长度为a_ia i ,每次可以从第i条线段的j位置跳到第 ...
- windows下遍历文件夹下的文件
#include <io.h>#include <stdio.h>#include <iostream>using namespace std;int ReadSt ...
- 获取页面url信息
方法: window.location.href = prefixURL+'webstatic/messageAnalysis/datadetail.html?id=' + num + "& ...
- Spring相关概念
DIP: Dependency Inversion Principle.翻译过来是依赖反转原则,也叫依赖倒置原则. 依赖倒置原则是设计模式几个重要原则之一.具体定义就是,底层模块依赖高层模块定义的接口 ...
- springboot jpa junit测试遇到的问题
jpa在插入数据的时候,插入的对象变量user中不能包含变量,需要时确切的值,否则会出现sql解析报错 解析报错如下图
- Kendo UI for jQuery使用教程：初始化jQuery插件
[Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...
- <image>的src属性的使用
刚接触前端不久.怎么用image显示图片是个问题,怎么使用数据流还是base64呢?小小的研究一下 <image src="url"> 1.接口返回数据流,src可以直 ...
- Java多线程和并发（三），Thread类和Runnable接口
目录 1.Thread和Runnable接口 三.Thread类和Runnable接口 1.Thread和Runnable接口
- CF contest 1216 Div3. F
题目链接:Click here Solution: 看起来是贪心,其实不然... 我们定义\(f[i]\)表示仅覆盖\(1\sim i\)所需要的最小代价,那么对\(i\)为0的点来说,易得\(f[i ...