用css编写一个简单的旋转魔方

其实这个就是对CSS3 transform 属性animation属性的一个简单的应用，在网页平面中创建6个面（div），让这6个面匀速的不停的旋转，要创造出来一个3d的感觉，在一个2维的网页平面上，你觉得应该怎么做呢？最直接的就是让它们在Z轴上有东西。下面这6张图片，是我随便找的狐妖小红娘中的图片，大小不是200px 200px的，我在图片属性上加了点东西，效果还不错。
代码：

<!DOCTYPE html>
<html lang="ch"><head><meta charset="UTF-8"><title>旋转魔方test</title><link rel="icon" href="img/qisui.ico"><style type="text/css">html {perspective: 888px; /*设置元素被查看位置的视图： 设置了这个才有后面的3d效果*/}.club-wrapper {width: 200px;height: 200px;/*background-color: #f10215;*//*开启它的相对定位 让它的子元素参照它 绝对定位*/position: relative;margin: 333px auto;/*设置3d变形效果*/transform-style: preserve-3d;animation: run 15s infinite linear;}/*设置club-wrapper下的所有的div的样式 给他们宽度和透明效果*/.club-wrapper > div {width: 200px;height: 200px;opacity: 0.7;position: absolute;}img {vertical-align: top;width: 200px;height: 200px;background-size: contain;}/*创建关键帧 */@keyframes run {from {transform: rotateX(0) rotateZ(0);}to {transform: rotateX(1turn) rotateZ(1turn);}}/*设置6个面的旋转  自己想象一下 空间中有6个面 这六个面最初都是贴在网页平面的 然后经过变幻 到6个位置*/.box1 {transform: rotateY(90deg) translateZ(100px);}.box2 {transform: rotateY(-90deg) translateZ(100px);}.box3 {transform: rotateX(90deg) translateZ(100px);}.box4 {transform: rotateX(-90deg) translateZ(100px);}.box5 {transform: rotateY(180deg) translateZ(100px);}.box6 {transform: rotateY(0deg) translateZ(100px);}</style></head><body><!--创建一个外层的容器--><div class="club-wrapper"><div class="box1"><img src="img/111.jpg"></div><div class="box2"><img src="img/222.jpg"></div><div class="box3"><img src="img/333.jpg"></div><div class="box4"><img src="img/444.jpg"></div><div class="box5"><img src="img/555.jpg"></div><div class="box6"><img src="img/666.jpg"></div></div></body>
</html>

效果：点我（服务器没过期之前可以看）
gif图片展示：

用css编写一个简单的旋转魔方相关推荐

python编写登录_通过Python编写一个简单登录功能过程解析
通过Python编写一个简单登录功能过程解析需求: 写一个登录的程序, 1.最多登陆失败3次 2.登录成功,提示欢迎xx登录,今天的日期是xxx,程序结束 3.要检验输入是否为空,账号和密码不能为空 ...
使用Tkinter编写一个简单的窗口应用
使用Tkinter编写一个简单的窗口应用文章目录使用Tkinter编写一个简单的窗口应用一.前言二.控件简介三.实践学习 1. 主窗口的创建以及Label的使用 2. Button的创建使用 ...
用CSS写一个简单的幻灯片效果页面
这里是修真院前端小课堂,本篇分析的主题是 [用CSS写一个简单的幻灯片效果页面] 每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方 ...
编写一个最简单的.php,学习猿地- 说明如果我们要编写一个简单的PHP脚本，需要学习哪些...
说明如果我们要编写一个简单的 PHP 脚本,需要学习哪些基础知识呢? PHP 基础 PHP 脚本可放置于文档中的任何位置. 标准的 PHP 脚本以 <?php 开头,以 ?> 结尾: ...
java编写存钱_用Java编写一个简单的存款
package desposit.money; public class DespositMoney { public static void main(String[] args) { Custom ...
python脚本编写_如何用Python包编写一个简单的脚本，表达你对父母的爱？
全文共2800字,预计学习时长6分钟在繁忙的工作生活中,我们经常忘记给所爱的人发WhatsApp.本教程将使用Python包Twilio编写一个简单的Python脚本来发送WhatsApp消息.我们 ...
用java编写一个简单计算器
java 采用java编写一个简单计算器,使用awt和swing 代码如下: import java.awt.Color; import java.awt.Font; import java.awt. ...
用 Go 编写一个简单的 WebSocket 推送服务
用 Go 编写一个简单的 WebSocket 推送服务本文中代码可以在 github.com/alfred-zhon- 获取. 背景最近拿到需求要在网页上展示报警信息.以往报警信息都是通过短信,微 ...
ros如何编译python文件_Python为ROS编写一个简单的发布者和订阅者
Python为ROS编写一个简单的发布者和订阅者 1.创建工作空间 1.1建立文件夹hello_rospy,再在该目录下建立子目录src,并创建工作空间 mkdir -p ~/hello_rospy/ ...

用css编写一个简单的旋转魔方

用css编写一个简单的旋转魔方相关推荐

最新文章

热门文章