css3实现旋转魔方

1.html代码

 <div class="wrap"><ul class="bigger"><ul class="small"><div></div><div></div><div></div><div></div><div></div><div></div></ul><li></li><li></li><li></li><li></li><li></li><li></li></ul></div>

2.style样式

body {background: #000 url("/assets/images/bg-recommend.png") no-repeat center top;
}
.wrap {position: relative;width: 300px;height: 300px;margin: 200px auto;perspective: 2000px;
}
.wrap .bigger,
.wrap .small {transform-style: preserve-3d;transform: rotateY(60deg);transform-origin: top;transition: all 2s;
}
.small {animation: move 5s linear infinite;
}
.bigger {animation: move 5s linear infinite;
}
.small div {position: absolute;top: 80px;left: 80px;width: 150px;height: 150px;transition: all 2s;opacity: 0.7;
}
.bigger li {position: absolute;top: 0;left: 0;width: 298px;height: 298px;border: 1px solid #fff;transition: all 2s;
}
.small div:nth-child(1) {background: url("../../assets/images/work.png");transform: translateZ(75px);
}
.small div:nth-child(2) {background: url("../../assets/images/work.png");transform: translateZ(-75px);
}
.small div:nth-child(3) {background: url("../../assets/images/work.png");transform: rotateY(90deg) translateZ(75px);
}
.small div:nth-child(4) {background: url("../../assets/images/work.png");transform: rotateY(-90deg) translateZ(75px);
}
.small div:nth-child(5) {background: url("../../assets/images/work.png");transform: rotateX(90deg) translateZ(75px);
}
.small div:nth-child(6) {background: url("../../assets/images/work.png");transform: rotateX(-90deg) translateZ(75px);
}
.bigger li:nth-child(2) {background: hsla(0, 50%, 50%, 0.4);transform: translateZ(150px);
}
.bigger li:nth-child(3) {background: hsla(60, 50%, 50%, 0.4);transform: translateZ(-150px);
}
.bigger li:nth-child(4) {background: hsla(120, 50%, 50%, 0.4);transform: rotateY(90deg) translateZ(150px);
}
.bigger li:nth-child(5) {background: hsla(180, 50%, 50%, 0.4);transform: rotateY(-90deg) translateZ(150px);
}
.bigger li:nth-child(6) {background: hsla(240, 50%, 50%, 0.4);transform: rotateX(90deg) translateZ(150px);
}
.bigger li:nth-child(7) {background: hsla(320, 50%, 50%, 0.4);transform: rotateX(-90deg) translateZ(150px);
}.wrap:hover .bigger {transform: rotateY(360deg);
}.wrap:hover .bigger li:nth-child(2) {transform: translateZ(300px);
}
.wrap:hover .bigger li:nth-child(3) {transform: translateZ(-300px);
}
.wrap:hover .bigger li:nth-child(4) {transform: rotateY(90deg) translateZ(300px);
}
.wrap:hover .bigger li:nth-child(5) {transform: rotateY(-90deg) translateZ(300px);
}
.wrap:hover .bigger li:nth-child(6) {transform: rotateX(90deg) translateZ(300px);
}
.wrap:hover .bigger li:nth-child(7) {transform: rotateX(-90deg) translateZ(300px);
}
@keyframes move {0% {transform: rotateY(0deg);}50% {transform: rotateY(180deg);}100% {transform: rotateY(360deg);}
}

css3实现旋转魔方相关推荐

html魔方转动效果,html5+css3实现旋转魔方的点点滴滴
一.知识点1:touch事件的相关内容 touchstart touchmove touchend 和其他常用事件一样,touch事件中的event对象中有许多非常有用的方法与属性,而且通过jQuer ...
[css] 使用css3做一个魔方旋转的效果
[css] 使用css3做一个魔方旋转的效果总的来说,用了一些 3D 效果的样式,如 translate3d,rotate3d,perspective,transform-style: preser ...
css3魔方3乘3每层旋转_学习做旋转魔方 (css3)
学习做旋转魔方 (css3) 看到一个帖子做了一个旋转魔方, 想着试着学习练练手. 看着高手的代码按照自己的思路, 码了一下, 记下遇到的一些问题. html 代码片段 3D 魔方 Rubik's C ...
用css编写一个简单的旋转魔方
其实这个就是对CSS3 transform 属性animation属性的一个简单的应用,在网页平面中创建6个面(div),让这6个面匀速的不停的旋转,要创造出来一个3d的感觉,在一个2维的网页平面上, ...
CSS3 3D旋转立方
##一.3D中的透视 1.透视是我们观察事物的方式在美术学中,有一种画法叫做透视画法,他让我们对所观察的物体从二维拓展到三维,也就是说,平面的物体变成了立体,占据了独自的 ...
CSS动画之旋转魔方轮播
下面我将一步一步详解如何利用纯CSS实现一个旋转魔方轮播的效果. 总的来说我们需要实现以下两个主要功能: 构建一个能够旋转的立方体让立方体拥有基本轮播所具有的特性但在完成以上两点之前我们需要再次了 ...
web前端入门到实战：CSS动画之旋转魔方轮播
下面我将一步一步详解如何利用纯CSS实现一个旋转魔方轮播的效果. 总的来说我们需要实现以下两个主要功能: 构建一个能够旋转的立方体让立方体拥有基本轮播所具有的特性但在完成以上两点之前我们需要再次了 ...
用css3制作旋转加载动画的几种方法
2019独角兽企业重金招聘Python工程师标准>>> 以WebKit为核心的浏览器,例如Safari和Chrome,对HTML5有着很好的支持,在移动平台中这两个浏览器对应的就是i ...
css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片思路:1.制作之前呢,我们先来 ...

css3实现旋转魔方

css3实现旋转魔方相关推荐

最新文章

热门文章