css3实现简易魔方

最新推荐文章于 2024-03-30 09:42:51 发布
最新推荐文章于 2024-03-30 09:42:51 发布
阅读量2.1k 收藏
点赞数
分类专栏： css3 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/webstalker/article/details/45060787
版权 

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
.stage{
	position:relative;
	top:50px;	
}
.box_before,.box_back,.box_left,.box_right,.box_top,.box_bottom {
	height:240px;
	width:240px;
	text-align:center;
	font-weight:bolder;
	color:yellow;
	font-size:60px;
	position:absolute;
	-webkit-transform-origin:right top;
	-moz-transform-origin:right top;
	-ms-transform-origin:right top;
	-o-transform-origin:right top;
	transform-origin:right top;
	box-shadow:0 0 10px rgba(50,50,50,0.1);
	text-align:center;
	line-height:240px;
	background:#000;
	border-radius:15px;
}

.box_before span,.box_back span,.box_left span,.box_right span,.box_top span,.box_bottom span{display:block;width:25%;line-height:60px;text-align:center;float:left;border-radius:15px;box-shadow:0 0 1px #000;}

.box_back {
	left:240px;
	top:88px;
	background:#000;
	-webkit-transform:skew( 0deg,20deg );
	-moz-transform:skew( 0deg,20deg );
	-ms-transform:skew( 0deg,20deg );
	-o-transform:skew( 0deg,20deg );
	transform:skew( 0deg,20deg );
}
.box_left {
	background:#000;
	-webkit-transform:skew( 0deg,-20deg );
	-moz-transform:skew( 0deg,-20deg );
	-ms-transform:skew( 0deg,-20deg );
	-o-transform:skew( 0deg,-20deg );
	transform:skew( 0deg,-20deg );
}
.box_bottom {
	width:218px;
	top:240px;
	left:19px;
	background:#000;
	-webkit-transform:rotate( -50deg ) skew( 20deg,30deg );
	-moz-transform:rotate( -50deg ) skew( 20deg,30deg );
	-ms-transform:rotate( -50deg ) skew( 20deg,30deg );
	-o-transform:rotate( -50deg ) skew( 20deg,30deg );
	transform:rotate( -50deg ) skew( 20deg,30deg );
}
.box_before {
	left:0;
	top:174px;
	background:#000;
	-webkit-transform:skew( 0deg,20deg );
	-moz-transform:skew( 0deg,20deg );
	-ms-transform:skew( 0deg,20deg );
	-o-transform:skew( 0deg,20deg );
	transform:skew( 0deg,20deg );
	-webkit-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	transition:all 300ms ease;
}
.box_before:hover {
	-webkit-transform:skew( 0deg,0deg );
	-moz-transform:skew( 0deg,0deg );
	-ms-transform:skew( 0deg,0deg );
	-o-transform:skew( 0deg,0deg );
	transform:skew( 0deg,0deg );
}
.box_right {
	left:240px;
	top:87px;
	background:#000;
	-webkit-transform:skew( 0deg,-20deg );
	-moz-transform:skew( 0deg,-20deg );
	-ms-transform:skew( 0deg,-20deg );
	-o-transform:skew( 0deg,-20deg );
	transform:skew( 0deg,-20deg );
	-webkit-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	transition:all 300ms ease;
}
.box_right:hover {
	-webkit-transform-origin:left;
	-moz-transform-origin:left;
	-ms-transform-origin:left;
	-o-transform-origin:left;
	transform-origin:left;
	-webkit-transform:skew( 0deg,-20deg );
	-moz-transform:skew( 0deg,-20deg );
	-ms-transform:skew( 0deg,-20deg );
	-o-transform:skew( 0deg,-20deg );
	transform:skew( 0deg,-20deg );
}
.box_top {
	width:220px;
	top:-0;
	left:19px;
	background:#000;
	-webkit-transform:rotate( -50deg ) skew( 20deg,30deg );
	-moz-transform:rotate( -50deg ) skew( 20deg,30deg );
	-ms-transform:rotate( -50deg ) skew( 20deg,30deg );
	-o-transform:rotate( -50deg ) skew( 20deg,30deg );
	transform:rotate( -50deg ) skew( 20deg,30deg );
	-webkit-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	transition:all 300ms ease;
}
.box_top:hover {
	top:-80px;
}
.box_before:before,#box_right:before {
	-webkit-transform:translate(0px,242px);
	-moz-transform:translate(0px,242px);
	-ms-transform:translate(0px,242px);
	-o-transform:translate(0px,242px);
	transform:translate(0px,242px);
	background:#000;
}
.box_before:before {
	width:240px;
	left:1px;
}
span.bgcolor_01{background:#da251c;color:#da251c;}
span.bgcolor_02{background:#fff500;color:#fff500;}
span.bgcolor_03{background:#00923f;color:#00923f;}
span.bgcolor_04{background:#ffffff;color:#ffffff;}
span.bgcolor_05{background:#0093dd;color:#0093dd;}
span.bgcolor_06{background:#e67817;color:#e67817;}
</style>
</head>

<body>

<!--上下12,左右34,前后56-->

<dl class="stage">

    <dd class="box_back">
    	<span class="bgcolor_01">1</span>
    	<span class="bgcolor_01">1</span>
    	<span class="bgcolor_01">1</span>
    	<span class="bgcolor_01">1</span>
    	<span class="bgcolor_01">1</span>
    	<span class="bgcolor_01">1</span>
        
    	<span class="bgcolor_01">1</span>
    	<span class="bgcolor_01">1</span>
    	<span class="bgcolor_01">1</span>
    	<span class="bgcolor_01">1</span>
        
    	<span class="bgcolor_01">1</span>
    	<span class="bgcolor_01">1</span>
    	<span class="bgcolor_01">1</span>
    	<span class="bgcolor_01">1</span>
    	<span class="bgcolor_01">1</span>
    	<span class="bgcolor_01">1</span>
    </dd>

    <dd class="box_bottom">
    	<span class="bgcolor_02">2</span>
    	<span class="bgcolor_02">2</span>
    	<span class="bgcolor_02">2</span>
    	<span class="bgcolor_02">2</span>
    	<span class="bgcolor_02">2</span>
    	<span class="bgcolor_02">2</span>
        
    	<span class="bgcolor_02">2</span>
    	<span class="bgcolor_02">2</span>
    	<span class="bgcolor_02">2</span>
    	<span class="bgcolor_02">2</span>
        
    	<span class="bgcolor_02">2</span>
    	<span class="bgcolor_02">2</span>
    	<span class="bgcolor_02">2</span>
    	<span class="bgcolor_02">2</span>
    	<span class="bgcolor_02">2</span>
    	<span class="bgcolor_02">2</span>
    </dd>

    <dd class="box_left">
    	<span class="bgcolor_03">3</span>
    	<span class="bgcolor_03">3</span>
    	<span class="bgcolor_03">3</span>
    	<span class="bgcolor_03">3</span>
    	<span class="bgcolor_03">3</span>
    	<span class="bgcolor_03">3</span>
        
    	<span class="bgcolor_03">3</span>
    	<span class="bgcolor_03">3</span>
    	<span class="bgcolor_03">3</span>
    	<span class="bgcolor_03">3</span>
        
    	<span class="bgcolor_03">3</span>
    	<span class="bgcolor_03">3</span>
    	<span class="bgcolor_03">3</span>
    	<span class="bgcolor_03">3</span>
    	<span class="bgcolor_03">3</span>
    	<span class="bgcolor_03">3</span>
    </dd>

    <dd class="box_before">
    	<span class="bgcolor_04">4</span>
    	<span class="bgcolor_04">4</span>
    	<span class="bgcolor_04">4</span>
    	<span class="bgcolor_04">4</span>
    	<span class="bgcolor_04">4</span>
    	<span class="bgcolor_04">4</span>
        
    	<span class="bgcolor_04">4</span>
    	<span class="bgcolor_04">4</span>
    	<span class="bgcolor_04">4</span>
    	<span class="bgcolor_04">4</span>
        
    	<span class="bgcolor_04">4</span>
    	<span class="bgcolor_04">4</span>
    	<span class="bgcolor_04">4</span>
    	<span class="bgcolor_04">4</span>
    	<span class="bgcolor_04">4</span>
    	<span class="bgcolor_04">4</span>
    </dd>

    <dd class="box_top">
    	<span class="bgcolor_05">5</span>
    	<span class="bgcolor_05">5</span>
    	<span class="bgcolor_05">5</span>
    	<span class="bgcolor_05">5</span>
    	<span class="bgcolor_05">5</span>
    	<span class="bgcolor_05">5</span>
        
    	<span class="bgcolor_05">5</span>
    	<span class="bgcolor_05">5</span>
    	<span class="bgcolor_05">5</span>
    	<span class="bgcolor_05">5</span>
        
    	<span class="bgcolor_05">5</span>
    	<span class="bgcolor_05">5</span>
    	<span class="bgcolor_05">5</span>
    	<span class="bgcolor_05">5</span>
    	<span class="bgcolor_05">5</span>
    	<span class="bgcolor_05">5</span>
    </dd>

    <dd class="box_right">
    	<span class="bgcolor_06">6</span>
    	<span class="bgcolor_06">6</span>
    	<span class="bgcolor_06">6</span>
    	<span class="bgcolor_06">6</span>
    	<span class="bgcolor_06">6</span>
    	<span class="bgcolor_06">6</span>
        
    	<span class="bgcolor_06">6</span>
    	<span class="bgcolor_06">6</span>
    	<span class="bgcolor_06">6</span>
    	<span class="bgcolor_06">6</span>
        
    	<span class="bgcolor_06">6</span>
    	<span class="bgcolor_06">6</span>
    	<span class="bgcolor_06">6</span>
    	<span class="bgcolor_06">6</span>
    	<span class="bgcolor_06">6</span>
    	<span class="bgcolor_06">6</span>
    </dd>

</dl>

</body>
</html>


webstalker
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+CSS宇宙魔方特效
baigali1225的博客
12-30 3217
预览图     CSS样式部分：     &lt;style type="text/css"&gt;          .warp{              width: 200px;              height: 200px;              margin: 330px auto;              /*border: 5px solid black;...
HTML+CSS+JS实现 ❤️3D立体魔方小游戏❤️
java李阳勇的博客
09-09 2322
???? 作者主页：Java李杨勇 ???? 简介：Java领域优质创作者????、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我，都给你】 ???? 欢迎点赞 ???? 收藏 ⭐留言 ???? 效果演示：文末获取源码 代码目录： 主要代码实现： 部分CSS样式： .cube { width: 100%; height: 100%; } @font-face { font
Web前端实现3D旋转魔方相册【超详细】
啸啸说的博客
05-25 1422
看完就会的表白神器！
WEB--3D立体魔方小游戏 （附源码）
qq_50594742的博客
12-27 1623
HTML + js + three.js 实现3D立体魔方小游戏，代码完整，素材完整
Web前端——魔方
高冷男孩不吃苹果的博客
12-04 656
html web前端实现好玩的动态魔方
探索Web三维魔方世界：Three.js Rubik
最新发布
gitblog_00092的博客
03-30 543
探索Web三维魔方世界：Three.js Rubik 项目地址:https://gitcode.com/newbieYoung/Threejs_rubik 在这个数字时代，我们不仅可以通过屏幕阅读文字和图像，还能与虚拟三维世界进行互动。如果你对3D编程感兴趣或者想要探索WebGL的魅力，那么这个项目——Three.js Rubik，绝对值得你的关注。 项目简介 Three.js Rubik是一个...
自学web前端练手——魔方实现（css3+html+js）
lvshaoshishang的博客
03-23 2097
以css3的平移、旋转、动画为主体构成。 效果如下：（发现不能传小视频就只能粗略截几张图了） 有九宫格飞出去飞回来的效果（一边旋转一边飞），但只设置飞一次，飞回来后只旋转魔方，但我发现有一个面永远转不到他不知道为啥_(:з」∠)_ 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charse...
教你用css3画一个魔方
jsmeng626的博客
12-28 209
<!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>立体呈现</.
CSS3实现3D魔方动画特效特效代码
03-20
CSS3实现3D魔方动画特效是一款使用CSS3的3D视觉魔方特效，旋转魔方动画。
纯CSS3实现简易3D按钮特效代码
03-20
纯CSS3实现简易3D按钮是一款相对简易的纯CSS3 3D按钮，可以自己配置背景颜色。
css实现3d魔方效果
09-20
只用css和html实现3d魔方效果，代码简单，效果美观
魔方源码（基于threejs）
08-08
纯threejs 制作的魔方
表白神器 旋转照片 旋转魔方 动态a.html
12-20
直接将路径改成自己的照片即可 表白神器 旋转照片 旋转魔方 动态
CSS3实现3D魔方动画特效.zip
07-04
CSS3实现3D魔方动画特效是一款使用CSS3的3D视觉魔方特效，旋转魔方动画。
使用HTML+CSS实现魔方转体
09-28
基于HTML+CSS动画效果，实现了魔方的转体效果，将魔方的每一次转动都很好的实现，期待大家的评论，期待和大家一起学习
css魔方效果
03-27
css魔方
CSS3实现3D魔方翻转网页动画特效特效代码
03-20
CSS3实现3D魔方翻转网页动画特效一款简单CSS3代码实现的3D魔方翻转网页动画特效下载。
CSS3实现简易版的刮刮乐效果
09-27
大家应该都玩过刮刮乐，如何实现刮刮乐效果，这篇文章主要为大家详细介绍了CSS3实现简易版的刮刮乐效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
魔方html效果,如何使用css3实现魔方的动画效果（完整代码）
weixin_36197248的博客
06-03 457
本篇文章给大家带来的内容是关于如何使用css3实现魔方的动画效果(完整代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。Document*{margin: 0;padding: 0;}.box{width: 300px;height: 300px;margin: 100px auto;position: relative;transform-style: preserve-3d...
html css js实现简易轮播图
06-28
要实现简易轮播图，我们需要使用 HTML、CSS 和 JavaScript。 1. 首先，在 HTML 中创建轮播图的容器元素，如 <div class="swiper-container"></div>。 2. 在 CSS 中设置容器元素的宽度和高度，以及每个轮播项（即...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值