纯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 ...
随机推荐
- eclipse查看jsp出现failed to create the part's controls的解决方法
问题描述 最近eclipse出现了一下问题,某个类无法打开,显示Failed to create the part’s controls ,如图: 问题解决 安装的JDK 版本估计有冲突导致IDE出现 ...
- 【AGC 036C】GP2
https://atcoder.jp/contests/agc036/tasks/agc036_c 题意 有一个长度为 $n$ 的非负整数序列 $x$,初始时全为 $0$.一次操作定义为选择一对正整数 ...
- MHA监控进程异常退出（MHA版本：0.56）
最近遇到一个非常诡异的问题,mha后台进程自己中断退出了.以下是报错:Mon Dec 21 20:16:07 2015 - [info] OK.Mon Dec 21 20:16:07 2015 - [ ...
- 爬虫相关基础技术铺垫---多线程Thread和队列Queue应用
from queue import Queue from threading import Thread class mydownloader(Thread): def __init__(self,q ...
- 2019ICPC南京网络赛总结
这次是在学校打的,总体不算好,过两题校排200多..很惨. 开场一段时间没人过题,但是很多人交I, 我也就再看,看着看着发现不可做,这时候转F,花了半天读懂题意的时候想到主席树查找.但是主席树这种查找 ...
- linux运维、架构之路-K8s通过Service访问Pod
一.通过Service访问Pod 每个Pod都有自己的IP地址,当Controller用新的Pod替换发生故障的Pod时,新Pod会分配到新的IP地址,例如:有一组Pod对外提供HTTP服务,它们的I ...
- JavaScript分支结构Ⅱ—switch-case
㈠switch-case 使用场合 优先用于等值判断的条件中 ㈡switch-case 语句执行逻辑 switch case语句是一种特殊的分支结构,可以根据一个表达式的不同取值,从不同的程序入口 ...
- C# 4.0
序言 动态绑定-dynamic class Program { static void Main(string[] args) { ; ; // Rest the mouse pointer over ...
- 计算机网络（十三），Socket编程实现TCP和UDP
十三.Socket编程实现TCP和UDP 1.TCP (1)TCPServer.java类 package com.interview.javabasic.socket; import com.int ...
- CF 672C 两个人捡瓶子 最短路与次短路思想
C. Recycling Bottles time limit per test 2 seconds memory limit per test 256 megabytes input standar ...