弹性盒子flex布局实现骰子六个面并让骰子3D空间旋转

最新推荐文章于 2021-12-01 10:22:09 发布

水中残月

最新推荐文章于 2021-12-01 10:22:09 发布

阅读量3.1k

点赞数 2

分类专栏： HTML5

本文链接：https://blog.csdn.net/sonnylight/article/details/52101888

版权

这个示例展示了如何利用CSS3的Flex布局和3D转换来创建一个骰子，骰子的六个面使用Flexbox进行排列，并且整个骰子能进行3D空间的旋转动画。

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

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Flex布局实现骰子</title>
	<style>
       *{
       	padding:0;
       	margin:0;
       }
       body{
       	background: black;
       }
       .container{
       	position: relative;
       	width: 100px;
       	height: 100px;
       	top:200px;
       	left: 400px;
       }
       .contain{
       	perspective:1000;
       	transform-style:preserve-3d;
       	position: relative;
       	width: 100px;
       	height: 100px;  
        animation:scroll 5s linear 1s infinite;     	
       }
       @keyframes scroll{
       	100%{
       		transform:rotate3d(1,1,1,360deg);
       	}
       }
       .view{
       	position: absolute;
       	height: 100px;
       	width: 100px;
       	background: #ccc;
        opacity: 0.8;
       }
       .view1{
       	z-index: 6;
       	display: flex;
       	display: -webkit-flex