关于利用css动画制作骰子运动

最新推荐文章于 2022-11-30 10:52:00 发布

Waterbusss

最新推荐文章于 2022-11-30 10:52:00 发布

阅读量1.6k

点赞数

分类专栏： web前端，css动画文章标签： css 动画

本文链接：https://blog.csdn.net/Waterbusss/article/details/66974240

版权

这篇博客介绍了如何利用CSS制作3D骰子并实现旋转动画。通过设置关键样式和转换属性，创建了六个面的骰子，并通过JavaScript控制骰子的旋转方向，包括左、右、上、下以及自动连续旋转。博客提供了完整的HTML和CSS代码示例。

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	body,li,ul{ margin:0; padding: 0; }
	li{ list-style: none; }
	.dice{ position: relative; width: 125px; height: 125px; margin: 50px auto 0; 
	transform-style:preserve-3d;/*关键属性*/ /* -webkit-perspective: 125;透视*/ /*transform: rotate3d(1,1,1,45deg);*/
		transition:transform 2s;
	}
	.dice li{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; text-indent: -99em; background:url("images/bg.jpg") no-repeat;}
	.dice li:nth-child(1){  background-position:-263px -259px; transform:translateZ(62.5px);}
	.dice li:nth-child(2){  background-position:-10px -132px; transform:rotateY(90deg) translateZ(-62.5px);}
	.dice li:nth-child(3){  background-position:-137px -131px; transform:rotateY(90deg) rotateX(90deg) translateZ(-62.5px);}
	.dice li:nth-child(4){ background-posi

最低0.47元/天解锁文章

Waterbusss

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于利用css动画制作骰子运动

Document body,li,ul{ margin:0; padding: 0; } li{ list-style: none; } .dice{ position: relative; width: 125px; height: 125px; margin: 50px auto 0; transform-style:preserve-3d;/*关键属性*/ /* -webkit
复制链接

扫一扫

专栏目录