Skip to content

Instantly share code, notes, and snippets.

@JSoon

JSoon/3d-cube-animation.html

Created April 12, 2018 08:38
Show Gist options
  • Save JSoon/50115b09365bc09bc7efae1d66ca7247 to your computer and use it in GitHub Desktop.
Save JSoon/50115b09365bc09bc7efae1d66ca7247 to your computer and use it in GitHub Desktop.
Download ZIP
css3 3D 立方体简单旋转动效
Raw
3d-cube-animation.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>css3 3D 立方体简单旋转动效</title>
<style>
.cube-wrapper {
width: 100px;
height: 100px;
margin: 100px;
background-color: #f4f4f4;
box-shadow: 0 0 15px rgba(0,0,0,.5);
/* 透视点必须加在父元素上，以保证子元素的3D效果正常 */
/* 这里的1000px代表当前子元素距离屏幕前用户视觉点（双眼）的距离，例如，22寸1680px宽的显示器，1000px约等于3/5个显示器宽度的距离 */
perspective: 1000px;
}
.cube {
position: relative;
width: 100px;
height: 100px;
transform: rotateY(0deg);
transform-style: preserve-3d;
/* 子元素进行Y轴旋转 */
animation: rotating 20s linear 0s infinite;
}
@keyframes rotating {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
.face {
position: absolute;
width: 100px;
height: 100px;
background-image: url('http://mt1.baidu.com/timg?shitu&quality=100&sharpen=100&er=&imgtype=0&wh_rate=null&size=h120&sec=1523513861&di=b9293decf6fc0fc081e8a09e4973a75a&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fimage%2F%2570%2569%2563%2Fitem%2F1e30e924b899a901332ffc5111950a7b0208f5bb.jpg');
background-size: 100px 100px;
background-color: transparent !important;
}
.face.f1 {
z-index: 4;
background-color: #f25f5c;
transform: rotateY(0) translate3d(0,0,50px);
}
.face.f2 {
z-index: 3;
left: 50px;
background-color: #ffe066;
transform: rotateY(90deg) translate3d(0,0,0);
}
.face.f3 {
z-index: 2;
background-color: #247ba0;
transform: rotateY(0) translate3d(0,0,-50px);
}
.face.f4 {
z-index: 1;
left: -50px;
background-color: #70c1b3;
transform: rotateY(-90deg) translate3d(0,0,0);
}
</style>
</head>
<body>
<div class="cube-wrapper">
<div class="cube">
<div class="face f1"></div>
<div class="face f2"></div>
<div class="face f3"></div>
<div class="face f4"></div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment