CSS做3D旋转魔方（立方体）

css做3D旋转魔方，使用的是3D位移与旋转属性，以及动画属性。代码不多，以下便是全部代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>立方体</title><style>@keyframes run{                      //添加一个为 run的动画0%{transform: rotate3d(1,1,1,0deg);           //动画开始时的旋转方向与角度}40%{                                                                                   //动画进行40%时的旋转方向与角度transform: rotate3d(1,1,1,80deg);        }70%{                                                                           //动画进行70%时的旋转方向与角度transform: rotate3d(1,1,1,280deg);}100%{transform: rotate3d(1,1,1,360deg);                   //动画进行100%时的旋转方向与角度}}*{                                          margin: 0;padding: 0;}.box{position: relative;top: 150px;left: 200px;width: 200px;height: 200px;transform-style: preserve-3d;animation: run 5s linear 0s infinite alternate;                    //将动画run 添加到这里//动画：动画名称  持续时间  速度曲线  延时  播放次数  是否轮流反向播放动画}.box div{                        //设置立方体每个面position: absolute;width: 200px;height: 200px;background-size: 100% 100%;}//分别给每个面添加一个背景图，并将前后上下左右六个面通过位移与旋转，放置到对应的位置。.f{                                    background-image: url(./image/猫.jpg);transform: translateZ(100px) ;}.b{background-image: url( ./image/p2.jpg  );transform: translateZ(-100px)  rotateY(-180deg);}.t{background-image: url( ./image/p1.jpg  );transform: translateY(-100px) rotateX(90deg);}.d{background-image: url( ./image/p8.jpg  );transform: translateY(100px) rotateX(-90deg);}.l{background-image: url( ./image/p6.jpg  );transform: translateX(-100px) rotateY(-90deg);}.r{background-image: url( ./image/p5.jpg  );transform: translateX(100px) rotateY(90deg);}</style>
</head>
<body><div class="box"><div class="f"></div><div class="b"></div><div class="t"></div><div class="d"></div><div class="l"></div><div class="r"></div></div>
</body>
</html>

效果如下：

CSS做3D旋转魔方（立方体）相关推荐

CSS动画之旋转魔方轮播
下面我将一步一步详解如何利用纯CSS实现一个旋转魔方轮播的效果. 总的来说我们需要实现以下两个主要功能: 构建一个能够旋转的立方体让立方体拥有基本轮播所具有的特性但在完成以上两点之前我们需要再次了 ...
web前端入门到实战：CSS动画之旋转魔方轮播
下面我将一步一步详解如何利用纯CSS实现一个旋转魔方轮播的效果. 总的来说我们需要实现以下两个主要功能: 构建一个能够旋转的立方体让立方体拥有基本轮播所具有的特性但在完成以上两点之前我们需要再次了 ...
HTML+CSS制作3D旋转相册
一.HTML+CSS制作3D旋转相册哈哈哈,放寒假啦!又可以好好闭关修炼了,最近,在抽屉里无意中翻到了自己上小学时的照片,太可爱啦,照片我就不贴出来了,于是,我就想着用所学的知识,做一个3D旋转相册 ...
css动画-3d旋转盒子
css动画-3d旋转盒子效果图: 思路: 1.一个容器,装6个子容器放6张图(我是采用的ul列表) <ul class="container"><li id=& ...
纯CSS制作3D旋转风车动画效果
效果图展示 HTML源码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"&g ...
CSS3 3D旋转图片立方体特效
CSS3 3D旋转图片立方体特效代码. 效果图: 这是一个3D的立方体盒子给盒子添加动画属性使其可以转动. 原理: 原理其实很简单我们看到的一个立方体其实就是靠六个平面搭建起来的如图所示 :六 ...
用html和css做一个旋转的正方体
用html和css做一个旋转的正方体 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
html中3d哪个方向是x轴,详解用CSS绘制3D旋转立方体
CSS3D旋转立方体绝对是能充分代表这些年CSS发展新高度的典型案例.从一种只是简单的颜色和尺寸渲染的标记符,CSS现在已经变成了一种能够创造出复杂的.具有艺术感染力的视觉效果的编程语言.动画效果的生 ...
android 3d魔方代码,css实现3d立体魔方的示例代码
今天来做一个简单的3d魔方先看效果图吧!把这个看会了,一些网上的3d的相册你就都会了一.我们先准备好们的html代码 3d立体魔方好了我们html代码就准备完成了,首先我们要有一个3d的思维,在 ...
CSS3 3d旋转图片立方体案例演示
2D动画旋转和位移的基础语法旋转的基础: 语法:transform:rotate() 1:旋转的是一个度数deg 2:默认情况下,绕着一个中心点进行转动 3:transform:rotatex()绕 ...

CSS做3D旋转魔方（立方体）

CSS做3D旋转魔方（立方体）相关推荐

最新文章

热门文章