HTML 用过渡跟动画制作一个简易的旋转魔方

示例代码：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

* {

margin: 0;

padding: 0;

}

html {

width: 100%;

height: 100%;

}

body {

width: 100%;

height: 100%;

display: flex;

justify-content: center;

align-items: center;

}

section {

width: 150px;

height: 150px;

position: relative;

animation: rate 4s linear infinite;

transform-style: preserve-3d;

}

section div {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: #fff;

}

section div:nth-child(1) {

transform: translateZ(75px);

}

section div:nth-child(2) {

transform: rotateY(-90deg) translateZ(75px);

}

section div:nth-child(3) {

transform: rotateY(180deg) translateZ(75px);

}

section div:nth-child(4) {

transform: rotateY(90deg) translateZ(75px);

}

section div:nth-child(5) {

transform: rotateX(90deg) translateZ(75px);

}

section div:nth-child(6) {

transform: rotateX(-90deg) translateZ(75px);

}

img {

width: 100%;

height: 100%;

}

@keyframes rate {

from {

transform: rotateY(0) rotateX(0);

}

to {

transform: rotateY(360deg) rotateX(360deg);

}

}

</style>

</head>

<body>

<section>

<div><img src="img/1.jpg" alt="" /></div>

<div><img src="img/2.jpg" alt="" /></div>

<div><img src="img/3.jpg" alt="" /></div>

<div><img src="img/4.jpg" alt="" /></div>

<div><img src="img/5.jpg" alt="" /></div>

<div><img src="img/6.jpg" alt="" /></div>

<section>

</body>

</html>

示例效果：

HTML 用过渡跟动画制作一个简易的旋转魔方相关推荐

动漫风html源码,CSS3动画制作一个卡通风格的404错误页面代码
CSS3动画制作一个卡通风格的404错误页面代码(有动画效果) html> Css 404错误页 .error-container { text-align: center; font-size ...
使用Java制作一个简易的远控终端
使用Java制作一个简易的远控终端远控终端的本质 1.服务端(攻击者)传输消息 ----> socket连接 ----> 客户端(被攻击者)接收消息 2.客户端执行消息内容(即执行服务端 ...
利用CSS浮动制作一个简易导航栏
初学CSS,利用CSS浮动和无序列表制作一个简易导航栏: <!DOCTYPE html> <html lang="en"> <head>< ...
使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具
查看本章节查看作业目录需求说明: 使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具实现思路: 使用history对象中的 forward() 方法和 ...
用Python制作一个简易的计时器
前言今天又带来个小玩意 - 用Python制作一个简易的计时器这个其实也能自定义一些东西的就比如名字颜色啥的自己看着改就行有想法的朋友也能自己再写写改改出其他的小功能效果展示实现代码 ...
制作一个简易的计算器
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一 ...
四节1.5V的5号电池、一个电容、一个12V的报警蜂鸣器、铜线和螺母，在螺母所栓的铜线触发接通电源后，缓慢放电10秒，制作一个简易震动报警器，需要用什么样的电容合适？...
根据题目描述,需要制作一个简易震动报警器,使用四节1.5V的5号电池作为电源,一个电容,一个12V的报警蜂鸣器,铜线和螺母.在螺母所栓的铜线触发接通电源后,需要缓慢放电10秒. 在这种情况下,需要一个 ...
使用python制作一个简易的远控终端
使用python制作一个简易的远控终端远控终端的本质 1.服务端(攻击者)传输消息 ----> socket连接 ----> 客户端(被攻击者)接收消息 2.客户端执行消息内容(即执行服 ...
用HTML5制作一个简易计算器
用H5制作一个简易计算器最近刚学JavaScript,之后紧接着做了一个简易的计算器,能够实现数字的加减乘除运算. 首先,先用HTML5搭建好计算器大体框架.我这里用了两个表格,一个充当显示器,另一 ...

HTML 用过渡跟动画制作一个简易的旋转魔方

HTML 用过渡跟动画制作一个简易的旋转魔方相关推荐

最新文章

热门文章