CSS骰子的效果

人生在勤，不索何获

已于 2023-02-21 20:22:16 修改

阅读量189

点赞数

分类专栏： CSS 文章标签： css css3 动画

于 2023-02-21 20:14:39 首次发布

本文链接：https://blog.csdn.net/weixin_38717886/article/details/129149123

版权

本文介绍如何使用CSS3实现一个逼真的骰子动画效果，详细解析了样式和动画的实现步骤，让读者能够理解并掌握CSS3在创建动态图形上的应用。

摘要由CSDN通过智能技术生成

css-骰子效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			:root{
   
				/* 魔方整体颜色 */
				--bg: #000;
				--c1: #f5e7a1;
				--c2: skyblue;
				--c3: #fff;
				--c4: #97d497;
				--c5: #801a1a;
				--c6: orange;
				/* 魔方小块的宽高 */
				--w: 30px;
				/* 魔方小块之间的间距 */
				--gap: 8px;
				/* 魔法整个的宽高 */
				--allW: calc(3 * var(--w) + 4 * var(--gap));
			}
			body{
   
				background-color: #000;
			}
			.container{
   
				margin: 100px auto;
				width: var(--allW);
				height: var(--allW);
				/* border: 1px solid red; */
				/* 保留3d效果 */
				transform-style: preserve-3d;
				/* 三维透视效果 */
				perspective: 900px;
			}
			
			.container-box{
   
				position: relative;
				width: 100%;
				height: 100%;
				transform-style: preserve-3d;
				/* 添加transform旋转 */
				/* transform: rotate(45deg) rotateY(45deg) rotateZ(45deg); */
				/* 添加旋转动画 */
				animation: rotate 5