纯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 ...
随机推荐
- 咕qwq
ccsp回来之后一直肚子难受,到现在还没好. 下午去人民医院急诊做了个CT,医生说是有问题的,但她看不出来,让我明天早起挂专家号去QAQ. UPD:初步诊断是胀气.医生让我先吃两天抗生素...
- TIOBE 2017 8月编程语言排行榜 后院“硝烟四起”
处于排名榜最前面的几个编程语言的分数长期以来一直都在下降:Java和C在TIOBE榜单中的分数一直比较低.而且几乎所有其他排名前十的语言每年都在下降. 那么哪个什么语言抓住了这个机遇呢?这发生在排行榜 ...
- MyEclipse使用教程：添加和更新插件（二）
[MyEclipse CI 2019.4.0安装包下载] 通过Eclipse Marketplace目录或各种更新站点类型添加插件来自定义您的Genuitec IDE. Genuitec提供以下IDE ...
- JAVA笔记10-抽象类
(1)abstrac关键字类修饰的类是抽象类,用abstract修饰的方法是抽象方法: (2)含有抽象方法的类必须被定义为抽象类: (3)抽象类必须被继承,抽象方法必须被重写(或者将子类也声明为抽象类 ...
- 关于python-selenium-chromedriver提示
问题一:AttributeError: module 'selenium.webdriver' has no attribute 'Chromedriver' 配置selenium环境时,执行代码 f ...
- mongodb .net 版本
1.现下载驱动 再 引用dll 2.https://www.cnblogs.com/zxtceq/p/7692200.html mongodb .net 版本 https://www.cnbl ...
- mybatis-plus-generator 实践
package com.huixiaoer.ant.generator; import com.baomidou.mybatisplus.annotation.DbType; import com.b ...
- 【java工具类】上传文件
/**上传文件 * @param file 文件 * @param filePath 上传文件路径,不包含文件名 * @param fileName 新的文件名 * @return 返回一个路径名 * ...
- [JZOJ6247]【NOI2019模拟2019.6.27】C【计数】
Description n<=200000 Solution 比赛时没做出这道题真的太弟弟了 首先我们从小到大插入数i,考虑B中有多少个区间的最大值为i 恰好出现的次数不太好计算,我们考虑计算最 ...
- 洛谷 P1546 最短网络 Agri-Net x
题目背景 农民约翰被选为他们镇的镇长!他其中一个竞选承诺就是在镇上建立起互联网,并连接到所有的农场.当然,他需要你的帮助. 题目描述 约翰已经给他的农场安排了一条高速的网络线路,他想把这条线路共享给其 ...