css3实现3d正方体动画效果

1.实现原理

主要通过CSS3中transform属性实现，首先给元素设置成3D元素，然后定义六个面的样式再通过transform属性对其进行旋转即可实现旋转立方体效果

2.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>3d正方体</title><link rel="stylesheet" href="./index.css">
</head><body><div class="box"><div><img src="./images/LOL01.jpg" alt=""></div><div><img src="./images/LOL08.jpg" alt=""></div><div><img src="./images/LOL07.jpg" alt=""></div><div><img src="./images/LOL10.jpg" alt=""></div><div><img src="./images/LOL05.jpg" alt=""></div><div><img src="./images/LOL06.jpg" alt=""></div></div>
</body>
</html>

3.css文件

* {margin: 0;padding: 0;box-sizing: border-box;
}body {background-color: #000;
}.box {position: fixed;width: 400px;height: 400px;/* background-color: red; */left: 0;top: 0;right: 0;bottom: 0;margin: 200px auto;transform-style: preserve-3d;transform: rotateX(0) rotateY(0);animation: run 5s linear infinite;/* perspective:1200px; */
}.box div {width: 400px;height: 400px;border: 5px solid #fff;top: 0;left: 0;position: absolute;line-height: 400px;text-align: center;
}.box div:nth-child(1) {transform: rotateY(90deg) translateZ(200px);animation: firsta 2s linear;/* background-color: aqua; */
}.box div:nth-child(2) {transform: rotateY(180deg) translateZ(200px);animation: firstb 2s linear;/* background-color: red; */
}.box div:nth-child(3) {transform: rotateY(270deg) translateZ(200px);animation: firstc 2s linear;/* background-color: orange; */
}.box div:nth-child(4) {transform: rotateY(360deg) translateZ(200px);animation: firstd 2s linear;/* background-color: blue; */
}.box div:nth-child(5) {transform: rotateX(90deg) translateZ(200px);animation: firste 2s linear;/* background-color: pink; */
}.box div:nth-child(6) {transform: rotateX(-90deg) translateZ(200px);animation: firstf 2s linear;/* background-color: brown; */
}@keyframes firsta {0% {transform: rotateY(90deg) translateZ(1400px);}100% {/* transform: rotateY(90deg) translateZ(200px); *//* background-color: aqua; */}
}@keyframes firstb {0% {transform: rotateY(180deg) translateZ(1400px);}100% {/* transform: rotateY(180deg) translateZ(200px); *//* background-color: red; */}
}@keyframes firstc {0% {transform: rotateY(270deg) translateZ(1400px);}100% {/* transform: rotateY(270deg) translateZ(200px); *//* background-color: orange; */}
}@keyframes firstd {0% {transform: rotateY(360deg) translateZ(1400px);}100% {/* transform: rotateY(360deg) translateZ(200px); *//* background-color: blue; */}
}@keyframes firste {0% {transform: rotateX(90deg) translateZ(1400px);}100% {transform: rotateX(90deg) translateZ(200px);/* background-color: pink; */}
}@keyframes firstf {0% {transform: rotateX(-90deg) translateZ(1400px);}100% {transform: rotateX(-90deg) translateZ(200px);/* background-color: brown; */}
}@keyframes run {0% {transform: rotateX(0deg) rotateY(0deg);}25% {transform: rotateX(90deg) rotateY(90deg);}50% {transform: rotateX(180deg) rotateY(180deg);}75% {transform: rotateX(270deg) rotateY(270deg);}100% {transform: rotateX(360deg) rotateY(360deg);}
}.box img {width: 100%;height: 100%;
}

4.效果展示

3d正方体旋转

css3实现3d正方体动画效果相关推荐

纯CSS实现3D正方体动画效果
目录前言正文 1.基本架构 2.书写每个div样式 3.为需要产生动画的一面单独设置样式 4.设置鼠标hover效果 5.优化总结前言纯CSS实现3D正方体动画效果,此方法是通过transf ...
html5+css3实现3D正方体动画相册2种+3D旋转木马立体动画相册+表白文字加动画爱心+炫酷万花筒五件套含音乐
1.html+css+jquery实现,电脑和手机均已兼容,完整源码下载 2.3D旋转木马立体动画相册 3.3D正方体旋转动画相册2中实现方式: 第一种方式: 第二种方式: 4.表白示爱文字+动画爱心 ...
css3中3D转换动画效果---transform: rotate3d(x,y,z,) 3D 旋转
CSS3 允许您使用 3D 转换来对元素进行格式化. 转换属性属性描述 CSS transform 向元素应用 2D 或 3D 转换. 3 transform-origin 允许你改变被转换元素的 ...
html和css3 js 3D 相框动画翻转效果id1084-网页前端设计
html和css3 js 3D 相框动画翻转效果id1084-网页前端设计源码下载地址在新演示地址 <!DOCTYPE html> <html lang="en&quo ...
如何用css实现左右翻页效果图,如何利用CSS3实现3D翻书效果
这篇文章主要介绍了CSS3实现3D翻书效果,基于CSS3新属性Animation及transform实现类似翻书效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下先上效果图:(样式有点丑,可以忽 ...
php 3d animation,CSS_纯CSS实现菜单、导航栏的3D翻转动画效果，我曾经向大家展示过闪光的logo - phpStudy...
纯CSS实现菜单.导航栏的3D翻转动画效果我曾经向大家展示过闪光的logo,燃烧的火狐狸,多重嵌套动画等例子,今天,我们将要制作一个简单但非常酷的3D翻转菜单.大家可以先看看实际效果,下面有效果截图 ...
css高清动图,CSS3+PNG实现GIF动画效果
昨天讲到了JavaScript+PNG模拟GIF动画,今天教大家用css3 + PNG实现GIF动画效果.代码很简单主要用到了css3的animation属性,代码如下: @-webkit-keyfr ...
css图形动画,CSS3 实现图形下落动画效果
先看效果实现代码 * { margin: 0; padding: 0; box-sizing: border-box; } body { width: 100%; height: auto; bac ...
6种css3鼠标滑过动画效果
<html><head><meta charset="utf-8" /><title>6种css3鼠标滑过动画效果</titl ...
html+div+动画效果,html+css3太阳系行星运转动画效果的实现代码
原标题:html+css3太阳系行星运转动画效果的实现代码做一个太阳系八大行星的运转动画,不包括行星的卫星,所有行星围绕太阳公转,行星采用纯色,暂时没有自转. 效果静态图: 动画中包括:太阳及各行星 ...

css3实现3d正方体动画效果

1.实现原理

2.html文件

3.css文件

4.效果展示

css3实现3d正方体动画效果相关推荐

最新文章

热门文章