css实现3D动画效果——正方体变六边形

正方体变六边形（html+css）

<!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="style.css">
</head>
<body><div id="box"><ul class="minbox"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul></div>
</body>
</html>

* {margin: 0;padding: 0;
}#box {position: relative;width: 300px;height: 300px;margin: 200px auto;transform-style: preserve-3d;
}ul {list-style: none;
}.minbox {position: absolute;width: 300px;height: 300px;transform-style: preserve-3d;animation: move1 5s infinite linear;
}.minbox li {width: 300px;height: 300px;position: absolute;line-height: 300px;text-align: center;font-size: 44px;
}.minbox li:nth-child(1) {background: #b7e0ff;background-size: cover;transform: translateZ(150px);transition: transform 1.5s;
}
.minbox li:nth-child(2) {background: #cfeadc;background-size: cover;transform: rotateY(90deg) translateZ(150px);transition: transform 1.5s;
}
.minbox li:nth-child(3) {background: #fbedca;background-size: cover;transform: rotateX(90deg) translateZ(150px);transition: transform 1.5s;
}
.minbox li:nth-child(4) {background: #fbe2ca;background-size: cover;transform: rotateX(180deg) translateZ(150px);transition: transform 1.5s;
}
.minbox li:nth-child(5) {background: #fedee1;background-size: cover;transform: rotateY(-90deg) translateZ(150px);transition: transform 1.5s;
}
.minbox li:nth-child(6) {background: #768ba0;background-size: cover;transform: rotateX(-90deg) translateZ(150px);transition: transform 1.5s;
}/* 鼠标悬停效果 */
.minbox:hover {animation: move2 5s infinite linear;
}
.minbox:hover li:nth-child(1) {background: #b7e0ff;background-size: cover;transform: translateZ(400px);}
.minbox:hover li:nth-child(2) {background: #cfeadc;background-size: cover;transform: rotateY(60deg) translateZ(400px);
}
.minbox:hover li:nth-child(3) {background: #fbedca;background-size: cover;transform: rotateY(120deg) translateZ(400px);
}
.minbox:hover li:nth-child(4) {background: #fbe2ca;background-size: cover;transform: rotateY(180deg) translateZ(400px);
}
.minbox:hover li:nth-child(5) {background: #fedee1;background-size: cover;transform: rotateY(-60deg) translateZ(400px);
}
.minbox:hover li:nth-child(6) {background: #768ba0;background-size: cover;transform: rotateY(-120deg) translateZ(400px);
}@keyframes move1 {0% {transform: rotateX(10deg) rotateY(0deg);}100% {transform: rotateX(370deg) rotateY(360deg);}
}
@keyframes move2 {0% {transform: rotateX(10deg) rotateY(0deg);}100% {transform: rotateX(10deg) rotateY(360deg);}
}

运行效果

3D动画—正方体变六边形

css实现3D动画效果——正方体变六边形相关推荐

7 款基于 HTML5 Canvas 的超炫 3D 动画效果
在以前,想要在浏览器中实现3D动画效果是非常困难的,但是自从HTML5诞生之后,这就变得十分简单了.遗憾的是,目前的浏览器对3D渲染效果还不是非常理想,尤其是渲染速度,可能用chrome和safari ...
css有哪些动画效果怎么实现的
css常见的动画效果:平移,缩放,旋转 css实现动画主要有三种方式: transition实现渐变动画 transform实现缩放平移效果动画 animation实现自定义动画 transition ...
css玻璃雨滴效果,CSS实现雨滴动画效果的实例代码
玻璃窗今天我们要实现的是雨滴效果,不过实现雨滴前,我们先把毛玻璃的效果弄出来,没有玻璃窗,雨都进屋了,还有啥好敲打的. .window { position: absolute; width: 10 ...
html5实现立体照片墙效果,利用css制作3D照片墙效果
利用css制作3D照片墙,具体代码如下所示: 无标题文档以上代码是准备工作,在html代码的body主体中放了一个div,里面包着你想要显示在照片墙上的照片,数量可以任意.接着开始着手写样式. bo ...
android开发骰子动画,GitHub - jieyou/dice: 一个css3 3d动画效果的色子（或称骰子？）...
dice -- 3d色子(或称骰子?) 一个css3 3d动画效果的色子完全效果(完全流畅的3d动画.阴影.圆角):Chrome\Firefox\Safari\iOS Safari 6.0+\And ...
html实现的动画效果代码,CSS实现雨滴动画效果的实例代码
玻璃窗今天我们要实现的是雨滴效果,不过实现雨滴前,我们先把毛玻璃的效果弄出来,没有玻璃窗,雨都进屋了,还有啥好敲打的. .window { position: absolute; width: 10 ...
android 动画x轴旋转,Android Roate3dAnimation实现围绕y轴竖直方向或者绕x轴方向旋转的3d动画效果...
概要: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Roate3dAnim ...
php3d按钮,CSS实现3D按钮效果
这次给大家带来CSS实现3D按钮效果,CSS实现3D按钮效果的注意事项有哪些,下面就是实战案例,一起来看一下. css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改bo ...
php 3d animation,如何用HTML5的Canvas制作3D动画效果
HTML5的诞生给web前端界带来了不小轰动,像什么动画旋转.图片滑块.图片轮播等等这些3D特效,也引发了不少朋友想要学习HTML5的好奇心.最近我一直在做canvas动画效果,发现canvas这个东 ...
CSS实现文字动画效果
今天来到了我们的第20个小项目的练习,距离我们100个小项目的练习,我们已经完成了五分之一了,剩下的五分之四,我们一起加油练习. 今天练习的这个小项目是一个CSS实现的文字动画效果,主要就是用在页面加 ...

css实现3D动画效果——正方体变六边形

正方体变六边形（html+css）

css实现3D动画效果——正方体变六边形相关推荐

最新文章

热门文章