CSS——正方体360°旋转动画效果

先看效果：

代码如下：

<!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>Document</title><style>.warpper {margin: 500px;perspective: 1600px;position: relative;perspective-origin: 50% 50%;}.first_box {width: 100px;height: 100px;line-height: 100px;font-size: 26px;text-align: center;transform-style: preserve-3d;animation: move 2s linear infinite;}.box {opacity: 0.5;position: absolute;width: 100px;height: 100px;}.box1 {transform: translateZ(50px);background-color: seagreen;}.box2 {transform: translateZ(-50px);background-color: sienna;}.box3 {transform: rotateX(90deg) translateZ(50px);background-color: red;}.box4 {background-color: #000000;transform: rotateX(-90deg) translateZ(50px);}.box5 {background-color: #004c8b;transform: rotateY(-90deg) translateZ(50px);}.box6 {background-color: #d1bd08;transform: rotateY(90deg) translateZ(50px);}@keyframes move {100% {transform: rotateY(360deg) rotateX(360deg);}}</style>
</head><body><div class="warpper"><div class="first_box"><div class="box1 box">box1</div><div class="box2 box">box2</div><div class="box3 box">box3</div><div class="box4 box">box4</div><div class="box5 box">box5</div><div class="box6 box">box6</div></div></div>
</body>
</html>

CSS——正方体360°旋转动画效果相关推荐

php带旋转动画刷新页面,css旋转动画效果的简单实现示例详解
我们可以通过css来做出动画效果,下面我为大家演示的是p的旋转,颜色过渡的动画 a{ text-align:center; line-height:100px; transition:all 2s; ...
jquery工具箱旋转动画效果
jquery工具箱旋转动画效果今天给大家分享一个工具箱的旋转动画效果,因为做GIS项目的时候所需要到,这是我在懒人之家看到的一个jquery鼠标点击按钮图标旋转弹出图标菜单旋转动画. 首先,可以引用 ...
html5中怎么让文字旋转动画效果图,HTML5中实现的CSS 3D文字旋转动画
一个基于HTML5的网页文字3D旋转动画效果,支持中文和英文字符,浏览请注意要使用支持CSS3技术的浏览器,比如Opera.Chrome等,主要结合transition 和 animation来实现, ...
Css3旋转动画效果
Css3旋转动画效果通过@keyframes规则能够创建动画,CSS3是可以通过代码来创建动画的.用@keyframes定义规则后,就不用像之前先在元素定义执行几秒,@keyframes规则内指定一 ...
纯html+css炫酷地球仪动画效果
纯html+css炫酷地球仪动画效果 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
css3动画图片旋转绕轴,css3图片旋转如何实现？css3实现图片旋转动画效果的方法...
在网页中,我们经常可以看到一张图片在旋转,这样的图片旋转是怎么来实现的呢?本篇文章就来为你介绍一下关于css3实现图片旋转动画效果的方法. 实现css3中图片的旋转可以使用可以使用 -webkit-a ...
uniapp小程序实现录音 uniapp小程序长按录音点击播放等功能（CSS实现语音音阶动画效果）
最近项目使用uniapp开发微信小程序,需要实现一个长按时进行语音录制,限制录制时间最大为60秒,录制完成后,可点击播放,播放时再次点击停止播放,录制完成长按实现删除功能,删除后又可重新录制(如上图所 ...
css3滚动倾斜,CSS3实现倾斜和旋转动画效果
这次给大家带来CSS3实现倾斜和旋转动画效果,实现CSS3倾斜和旋转动画效果的注意事项有哪些,下面就是实战案例,一起来看一下. 先看看静态的效果,运行后的效果更好示例代码如下 css3学习 .d{w ...
html摩天轮效果,用CSS3 animation模拟摩天轮旋转动画效果
这次我们来实现一个简单又很有意思的动画效果,完全由CSS 的animation来实现,素材和源码来自于其他网站,个人对源码做了一些改动优化完成后的效果--旋转效果 (github pages打开特别 ...

CSS——正方体360°旋转动画效果

CSS——正方体360°旋转动画效果相关推荐

最新文章

热门文章

CSS——正方体360°旋转动画 效果

CSS——正方体360°旋转动画 效果相关推荐

最新文章

热门文章

CSS——正方体360°旋转动画效果

CSS——正方体360°旋转动画效果相关推荐