利用css3的3d旋转透视加动画做的一个骰子动态效果

实现效果
代码

 <div class="father"><div class="son son1">1</div><div class="son son2">2</div><div class="son son3">3</div><div class="son son4">4</div><div class="son son5">5</div><div class="son son6">6</div></div>

 .father {position: relative;width: 100px;height: 100px;margin: 100px 200px;transform-style: preserve-3d;perspective: 10000px;transition: all 4s;animation: rotate3d 1s infinite 0.5s linear;}.father:hover{transform: rotate3d(1,1,0,360deg);}.son {position: absolute;width: 100px;height: 100px;left: 0;top: 0;border: 1px solid #000;background-color: red;/* box-shadow: 0 4px 4px rgba(0,0,0,0.3); *//* border-radius: 4px; */transition: all 3s;text-align: center;line-height: 100px;font-size: 40px;color: #fff;font-weight: 700;}.son1 {transform:  translate3d(-50px,0,0) rotate3d(0,1,0,-90deg);}.son2 {transform:  translate3d(50px,0,0) rotate3d(0,1,0,90deg);}.son3 {transform:  translate3d(0,0,-50px);}.son4 {transform: translate3d(0,0,50px);}.son5 {transform:translate3d(0,-50px,0) rotate3d(1,0,0,90deg);}.son6 {transform:translate3d(0,50px,0) rotate3d(1,0,0,90deg);}@keyframes rotate3d {0% {transform: translate3d(10px,10px,10px) rotate3d(1,1,0,0deg);  }20% {transform:  translate3d(10px,100px,0) rotate3d(1,1,0,60deg);}40% {transform:  translate3d(100px,10px,100px) rotate3d(1,1,0,-180deg);  }60% {transform: translate3d(-10px,10px,300px) rotate3d(1,1,0,240deg);}100% {transform:  translate3d(10px,0,-100px) rotate3d(1,1,0,360deg);}}

利用css3的3d旋转透视加动画做的一个骰子动态效果相关推荐

【CSS3进阶】酷炫的3D旋转透视
之前学习 react+webpack ,偶然路过 webpack 官网 ,看到顶部的 LOGO ,就很感兴趣. 最近觉得自己 CSS3 过于薄弱,想着深入学习一番,遂以这个 LOGO 为切入口,好好研 ...
css拖动音乐进度条,利用CSS3实现3D滑块进度条拖动动画特效
特效描述:利用CSS3实现 3D滑块进度条拖动动画特效.利用CSS3实现3D滑块进度条拖动动画特效代码结构 1. HTML代码 Scalable 3D Range Sliders Simple ...
html怎么做成3d正方体,利用CSS3的3D效果制作正方体
学会用CSS3的3D效果制作一个正方体,有助于增强我们对3D场景的旋转和位移属性的理解.下面的动态图就是利用3D旋转位移,结合动画效果制作的.感兴趣的同学可以在完成正方体的制作基础上,再去探究一下添加 ...
css3制作正方体,利用CSS3的3D效果制作正方体
学会用css3的3d效果制作一个正方体,有助于增强我们对3d场景的旋转和位移属性的理解.下面的动态图就是利用3d旋转位移,结合动画效果制作的.感兴趣的同学可以在完成正方体的制作基础上,再去探究一下添加 ...
css3彩色3D文字上下漂浮动画js特效
下载地址一款简单好看的css3彩色3D文字上下漂浮动画特效,支持中文. dd:
CSS3实现3D魔方翻转网页动画特效
CSS3实现3D魔方翻转网页动画特效 <link rel="stylesheet" type="text/css" href="square.c ...
CSS3 简单3D旋转画册
CSS3 简单3D旋转画册上次我们简单介绍了c3的一些基础知识,我们今天来做一个小练习: 这个简单的案例是3D的一个旋转画册,那么上面是我们的一个效果图,因为不能够传视屏所以就暂时只能够截图来看一下 ...
css使图片有3d效果,利用CSS3实现3D倾斜视差图片展示特效
特效描述:利用CSS3实现 3D倾斜视差图片展示特效.利用CSS3实现3D倾斜视差图片展示特效代码结构 1. HTML代码 Movies Popular Princess Mononoke Sp ...
前端:使用CSS3实现酷炫的3D旋转透视
3D动画效果现在越来越普及,已经被广泛的应用到了各个平台,比如阿里云,华为云,webpack官网等.它可以更接近于真实的展示我们的产品和介绍,带来极强的视觉冲击感.所以说,为了让自己更加优秀,css3 ...

利用css3的3d旋转透视加动画做的一个骰子动态效果

利用css3的3d旋转透视加动画做的一个骰子动态效果相关推荐

最新文章

热门文章