纯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 ...
随机推荐
- 【基础操作】博弈论 / SG 函数详解
博弈死我了……(话说哪个小学生会玩博弈论提到的这类弱智游戏,还取石子) 先推荐两个文章链接:浅谈算法——博弈论(从零开始的博弈论) 博弈论相关知识及其应用 This article was updat ...
- UVALive - 5695 The Last Puzzle (思维+区间dp)
题目链接 题目大意:有n个按钮排成一条直线,你的任务是通过左右移动按下所有按钮,按钮如果一段时间没有被按下就会被弹开. 以下是我的推论(不一定正确): 直观地看的话,如果选择的是最优路径,那么路径的形 ...
- 我说CMMI之一：CMMI是什么--转载
我说CMMI之一:CMMI是什么 有些朋友没有接触过CMMI,正在学习CMMI,CMMI本身的描述比较抽象,所以,读起来有些费劲.有些朋友实施过CMMI,但是可能存在对CMMI的一些误解,因此我想说说 ...
- 原型模式故事链(5)--JS变量作用域、作用域链、闭包
上一章 JS执行上下文.变量提升.函数声明 传送门:https://segmentfault.com/a/11... 本次我们主要讲讲变量作用域和闭包变量作用域:顾名思义:变量起作用的范围.变量分为全 ...
- Http的通信机制？
HTTP协议即超文本传送协议(Hypertext Transfer Protocol ),是Web联网的基础,也是手机联网常用的协议之一,HTTP协议是建立在TCP协议之上的一种应用. HTTP连接 ...
- （转）Spring实例化
标签:SpringContextUtil,getBean 手动获取Bean 方法一 不用配置xml,直接java代码实现 /** * 工厂模式选择Bean类 */ public class MyBe ...
- socket 异步 发送 接收 数据
Socket socketClints = new Socket(AddressFamily.InterNetwork, SocketType.Stream, ProtocolType.Tcp); / ...
- Redis 集群规范
什么是 Redis 集群??Redis 集群是一个分布式(distributed).容错(fault-tolerant)的 Redis 实现,集群可以使用的功能是普通单机 Redis 所能使用的功能的 ...
- the nearest point/vertex point of linestring
引用https://github.com/Toblerity/Shapely/issues/190 snorfalorpagus commented on 18 Oct 2014 The point ...
- 智能指针之shared_ptr基本概述
1.shared_ptr允许有多个指针指向同一个对象,unique_ptr独占所指向的对象. 2.类似于vector,智能指针也是模板.创建智能指针: shared_ptr<string> ...