如何利用css制作旋转魔方

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><style>/*最外层容器样式*/.wrap {width: 200px;height: 200px;margin: 200px;position: relative;}/*包裹所有容器样式*/.cube {width: 200px;height: 200px;margin: 0 auto;transform-style: preserve-3d;transform: rotateX(-30deg) rotateY(-80deg);animation: rotate linear 20s infinite;}@-webkit-keyframes rotate {from {transform: rotateX(0deg) rotateY(0deg);}to {transform: rotateX(360deg) rotateY(360deg);}}.cube div {position: absolute;width: 200px;height: 200px;opacity: 0.8;transition: all .4s;}/*定义所有图片样式*/.pic {width: 200px;height: 200px;}.cube .out_front {transform: rotateY(0deg) translateZ(100px);}.cube .out_back {transform: translateZ(-100px) rotateY(180deg);}.cube .out_left {transform: rotateY(-90deg) translateZ(100px);}.cube .out_right {transform: rotateY(90deg) translateZ(100px);}.cube .out_top {transform: rotateX(90deg) translateZ(100px);}.cube .out_bottom {transform: rotateX(-90deg) translateZ(100px);}/*定义小正方体样式*/.cube span {display: block;width: 100px;height: 100px;position: absolute;top: 50px;left: 50px;}.cube .in_pic {width: 100px;height: 100px;}.cube .in_front {transform: rotateY(0deg) translateZ(50px);}.cube .in_back {transform: translateZ(-50px) rotateY(180deg);}.cube .in_left {transform: rotateY(-90deg) translateZ(50px);}.cube .in_right {transform: rotateY(90deg) translateZ(50px);}.cube .in_top {transform: rotateX(90deg) translateZ(50px);}.cube .in_bottom {transform: rotateX(-90deg) translateZ(50px);}/*鼠标移入后样式*/.cube:hover .out_front {transform: rotateY(0deg) translateZ(200px);}.cube:hover .out_back {transform: translateZ(-200px) rotateY(180deg);}.cube:hover .out_left {transform: rotateY(-90deg) translateZ(200px);}.cube:hover .out_right {transform: rotateY(90deg) translateZ(200px);}.cube:hover .out_top {transform: rotateX(90deg) translateZ(200px);}.cube:hover .out_bottom {transform: rotateX(-90deg) translateZ(200px);}</style>
</head><body><!-- 外层最大容器 --><div class="wrap"><!--包裹所有元素的容器--><div class="cube"><!--前面图片 --><div class="out_front"><img src="https://img-blog.csdn.net/20170716094246620" class="pic" /></div><!--后面图片 --><div class="out_back"><img src="https://img-blog.csdn.net/20170716094334594" class="pic" /></div><!--左面图片 --><div class="out_left"><img src="https://img-blog.csdn.net/20170716094400013" class="pic" /></div><!--右面图片 --><div class="out_right"><img src="https://img-blog.csdn.net/20170716094422331" class="pic" /></div><!--上面图片 --><div class="out_top"><img src="https://img-blog.csdn.net/20170716094444434" class="pic" /></div><!--下面图片 --><div class="out_bottom"><img src="https://img-blog.csdn.net/20170716094504432" class="pic" /></div><!--小正方体 --><span class="in_front"><img src="https://img-blog.csdn.net/20170716120759718" class="in_pic" /></span><span class="in_back"><img src="https://img-blog.csdn.net/20170716120759718" class="in_pic" /></span><span class="in_left"><img src="https://img-blog.csdn.net/20170716120759718" class="in_pic" /></span><span class="in_right"><img src="https://img-blog.csdn.net/20170716120759718" class="in_pic" /></span><span class="in_top"><img src="https://img-blog.csdn.net/20170716120759718" class="in_pic" /></span><span class="in_bottom"><img src="https://img-blog.csdn.net/20170716120759718" class="in_pic" /></span></div></div>
</body></html>
---------------------
作者：FEWY
来源：CSDN
原文：https://blog.csdn.net/FE_dev/article/details/75142505
版权声明：本文为博主原创文章，转载请附上博文链接！

如何利用css制作旋转魔方相关推荐

利用css制作3D照片墙
利用css制作3D照片墙 <!doctype html> <html> <head> <meta charset="utf-8"> ...
html5实现立体照片墙效果,利用css制作3D照片墙效果
利用css制作3D照片墙,具体代码如下所示: 无标题文档以上代码是准备工作,在html代码的body主体中放了一个div,里面包着你想要显示在照片墙上的照片,数量可以任意.接着开始着手写样式. bo ...
HTML+CSS制作旋转的loading效果
HTML+CSS制作旋转的loading效果效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="en">< ...
利用 Css 制作精美的卡片UI （赞）
原文出处:https://segmentfault.com/a/1190000009388832 效果图,鼠标移彩色,移出黑白本教程将会告诉你如何用 Html ...
利用Canvas制作旋转的矩形
利用Canvas制作旋转的矩形 HTML5 Canvas API提供了强大的图形绘制功能,包括形状.颜色.线条样式等.在本文中,我将展示如何使用Canvas API创建一个旋转的矩形. 一.HTML结 ...
利用CSS制作一个向右的箭头
利用CSS制作一个向右的箭头 <style type="text/css">.box{/* 利用CSS制作一个向右的箭头 */width:200px;height:20 ...
利用Python制作旋转花灯，祝大家元宵节快乐
1.原材料 1.1 花灯纸如下所示,还可以加上自己喜欢的图案.文字等. 2.2 Python环境和模块一台安装了Python环境的电脑,Python环境需要安装以下模块. 干货主要有: ① 200 ...
利用css制作3d图片旋转_练习
效果: 鼠标触碰时(停止旋转并高亮): 代码: <!DOCTYPE html> <html lang="en"> <head><meta ...
如何利用CSS制作星星图案
CSS是网页设计师和前端人员需要了解和学习的一门语言,特别是现在很多网页使用扁平化设计,这类设计风格大部分布局.交互动画甚至是图标都会使用高级点的CSS3技能,所以我们应该熟练掌握CSS这门样式语言. ...

如何利用css制作旋转魔方

如何利用css制作旋转魔方相关推荐

最新文章

热门文章