运用CSS写出旋转的立方体

友友们!!纯纯用css就可以写出会自己旋转的3D立方体!

首先需要了解几个属性：

transform 变形

translate 位移

rotate 旋转

perspective 透视

transform-style:preserve-3d 开启立体呈现

定义动画：

@keyframes name{

from{

transform:rotate(0deg)

}

to{

transform:rotate(360deg)

}

调用动画：

animation:name 1s linear infinite

认识了这些需要用到的属性以后，我们就可以开始写代码啦~

我们可以先写出html结构

 <div class="cube"><main><div class="front"></div><div class="back"></div><div class="left"></div><div class="right"></div><div class="top"></div><div class="bottom"></div></main></div>

写出立方体的六个面，并且给出每个面不同的类名。

接下来再来写CSS部分：

给大盒子设置宽高，并且给出视距，以便等会更好的观察立方体

  .cube {width: 200px;height: 200px;perspective: 800px;margin: 100px;}

然后咱们要给盒子的主体调整一下位置，其他六个面可以更好的摆放，记得要给主体父盒子开启3D立体呈现哦~

  main {width: 100%;height: 100%;transform: translateZ(-100px);transform-style: preserve-3d;}

接下来就是要调整立方体的六个面了，先统一设置div的宽高：

 .cube div {width: 100%;height: 100%;position: absolute;}

然后就可以一个面一个面的位移、旋转，把它们调整至我们需要它所在的位置了

 .front {background: pink;transform: translateZ(100px);}.back {background-color: grey;transform: translateZ(-100px);}.left {background-color: khaki;transform: rotateY(90deg) translateZ(100px);}.right {background-color: lightblue;transform: rotateY(90deg) translateZ(-100px);}.top {background-color: lightseagreen;transform: rotateX(90deg) translateZ(-100px);}.bottom {background-color: lightsalmon;transform: rotateX(90deg) translateZ(100px);}

这个部分的位置转换、数值等一定要算清楚噢，让每个面都能连接在一起~

设置好位置后目前我们还是看不出来的，页面还是这个效果

这个时候我们就要定义动画了：

 @keyframes rotate {from {transform: rotateX(0) rotateY(0);}to {transform: rotateX(360deg) rotateY(360deg);}}

让父级调用该动画：

在前面main的代码中再添加调用动画的代码

animation: rotate 5s linear infinite;

这个时候我们就可以看到立方体开始旋转啦~

非常有意思的小实验噢~ 大家可以试试

以下是完整代码：

<!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>.cube {width: 200px;height: 200px;perspective: 800px;margin: 100px;}main {width: 100%;height: 100%;transform: translateZ(-100px);transform-style: preserve-3d;animation: rotate 5s linear infinite;}@keyframes rotate {from {transform: rotateX(0) rotateY(0);}to {transform: rotateX(360deg) rotateY(360deg);}}.cube div {width: 100%;height: 100%;position: absolute;}.front {background: pink;transform: translateZ(100px);}.back {background-color: grey;transform: translateZ(-100px);}.left {background-color: khaki;transform: rotateY(90deg) translateZ(100px);}.right {background-color: lightblue;transform: rotateY(90deg) translateZ(-100px);}.top {background-color: lightseagreen;transform: rotateX(90deg) translateZ(-100px);}.bottom {background-color: lightsalmon;transform: rotateX(90deg) translateZ(100px);}</style>
</head><body><div class="cube"><main><div class="front"></div><div class="back"></div><div class="left"></div><div class="right"></div><div class="top"></div><div class="bottom"></div></main></div>
</body></html>

运用CSS写出旋转的立方体相关推荐

网页通过CSS写出生日倒计时（利用：日期倒计时、元素自动旋转、边框视觉按钮效果）[直接复制代码即可实现、含注释]
图片效果 ↓(代码为粉图,生日歌自动播放) 视频效果 ↓(音乐为自动播放) 网页通过CSS写出生日倒计时(利用:日期倒计时.元素自动旋转.边框视觉按钮效果) 代码 ↓(可直接复制使用,音乐引用网易云音 ...
[css] 写出主流浏览器内核私有属性的css前缀
[css] 写出主流浏览器内核私有属性的css前缀完善一下: Chrome:Blink内核 -webkit-Safari:WebKit内核 -webkit-Firefox :Gecko内核 -moz ...
[css] 写出你知道的CSS水平和垂直居中的方法
[css] 写出你知道的CSS水平和垂直居中的方法 flex布局水平垂直居中: <div class="outer"><di ...
[css] 写出你遇到过IE6/7/8/9的BUG及解决方法
[css] 写出你遇到过IE6/7/8/9的BUG及解决方法把以前兼容IE6.7学习的东西搬出来了,还以为不见了.兼容性问题 1.IE6margin双边距问题 2.IE67 li间隙问题 3.图片间 ...
[css] 写出几个初始化CSS的样式，并解释说明为什么要这样写
[css] 写出几个初始化CSS的样式,并解释说明为什么要这样写 padding:0; margin:0;为了解决各个浏览器显示不一样的问题个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容 ...
[css] 写出div在不固定高度的情况下水平垂直居中的方法？
[css] 写出div在不固定高度的情况下水平垂直居中的方法? 我知道的有两种方法<!DOCTYPE html> <html><head><meta char ...
[css] 写出在不固定宽高的元素在固定高度的情况下水平垂直居中的方法
[css] 写出在不固定宽高的元素在固定高度的情况下水平垂直居中的方法 flex布局:还有就是可以用定位也可以实现等等: flex:父div:{display:flex: justify-conten ...
[css] 写出固定子容器在固定的父容器下水平垂直居中的布局
[css] 写出固定子容器在固定的父容器下水平垂直居中的布 1.父容器 position: relative,子元素 position: absolute;left: 50%;top: 50%;tra ...
图片上的文字用CSS写出毛玻璃效果
图片上的文字用CSS写出毛玻璃效果 2016-10-04 08:11 网页设计标签:css 1297 发表评论半透明颜色最初的使用场景之一就是作为背景.将其叠放在照片类或其他 ...

运用CSS写出旋转的立方体

运用CSS写出旋转的立方体相关推荐

最新文章

热门文章