html怎么让方块自动旋转,纯CSS3做的的3D旋转方块

E::before_CSS参考手册_web前端开发参考手册系列

body{margin:0;}

.hh{-webkit-perspective-origin:50% 100px;-moz-perspective-origin:50% 100px;-webkit-perspective:400;-moz-perspective:400;}

.div1{margin:100px auto 0;width:200px;height:200px;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-transition:-webkit-transform 2s linear;-moz-transition:-moz-transform 2s linear;-webkit-transform:rotateX(0) rotateY(0);-moz-transform:rotateX(0) rotateY(0);position:relative;-webkit-animation:animations 5s linear infinite;-moz-animation:animations 5s linear infinite;}

.div1:hover{-webkit-transform:rotateX(90deg) rotateY(90deg);-moz-transform:rotateX(90deg) rotateY(90deg);}

.div1 div{width:200px;height:200px;background:rgba(0,0,0,0.6);position:absolute;line-height:200px;text-align:center;color:#fff;font-size:30px;font-family:"微软雅黑";font-weight:bold;}

.div2{-moz-transform:rotateY(0) translateZ(100px);-webkit-transform:rotateY(0) translateZ(100px);}

.div3{-moz-transform:rotateY(90deg) translateZ(100px);-webkit-transform:rotateY(90deg) translateZ(100px);}

.div4{-moz-transform:rotateY(-90deg) translateZ(100px);-webkit-transform:rotateY(-90deg) translateZ(100px);}

.div5{-moz-transform:rotateY(180deg) translateZ(100px);-webkit-transform:rotateY(180deg) translateZ(100px);}

.div6{-moz-transform:rotateX(-90deg) translateZ(100px);-webkit-transform:rotateX(-90deg) translateZ(100px);}

.div7{-moz-transform:rotateX(90deg) translateZ(100px);-webkit-transform:rotateX(90deg) translateZ(100px);}

@-webkit-keyframes animations{

0%{-webkit-transform:rotateX(0) rotateY(0);}

25%{-webkit-transform:rotateX(90deg) rotateY(90deg);}

50%{-webkit-transform:rotateX(180deg) rotateY(180deg);}

75%{-webkit-transform:rotateX(270deg) rotateY(270deg);}

100%{-webkit-transform:rotateX(360deg) rotateY(360deg);}

}

@-moz-keyframes animations{

0%{-moz-transform:rotateX(0) rotateY(0);}

25%{-moz-transform:rotateX(90deg) rotateY(90deg);}

50%{-moz-transform:rotateX(180deg) rotateY(180deg);}

75%{-moz-transform:rotateX(270deg) rotateY(270deg);}

100%{-moz-transform:rotateX(360deg) rotateY(360deg);}

}

春

天

在

哪

里

呀

html怎么让方块自动旋转,纯CSS3做的的3D旋转方块相关推荐

纯CSS3做3D动画魔方
之前本来就做过一次,忘了记录了.最近在做抽奖程序的时候看到那个界面就又想再做一次,于是作为小白的掌柜就再次做了一个很简单的3D动画魔方.主要用到的知识点是相对定位(position: relativ ...
HTML5+CSS3小实例：3D旋转卡片
HTML5+CSS3实现3D旋转卡片,开发工具:VS Code. 先看效果: [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-82YkNLBC-1653803901135 ...
【3D旋转墙】最简单的3d旋转墙
目录前言 HTML部分源码 CSS部分源码 JS部分源码前言还在为节日不知道送女朋友什么而烦恼?还在为父母不知道计算机专业是写代码而烦恼?还在为母亲节or父亲节送父母礼物父母说不要乱花钱?(当然 ...
纯CSS3实现柱状图的3D立体动画效果
来源 | https://juejin.im/post/6844903857147871239 首先,我们看一看要实现的效果: 今天这篇文章所实现的动画效果起源于一个小小的想法,这个想法来自于另一个网 ...
css3图标一直旋转样式,css3 – 问题使Bootstrap3图标旋转
灵感来自 Fontawesome,我试图使一个旋转图标与bootstrap3.它很容易通过CSS3转换和转换实现.问题是图标不围绕中心旋转.它在旋转时摆动. 代码粘贴在下面.任何人知道是什么原因导致的 ...
html中轮播图中图片样式如何调,纯CSS3做轮播图基础样式设置
一,准备工作轮播图的主要遇新是直朋能到分览思想: 1,让友,记基开前不接些前家我告对猿果水使钮控轮播的几张图片横向连成一片,默认是从上到下(如果图片像朋支不器几事为的时后级功发发来久都这样含制层是请 ...
css html制做王者荣耀网站,css3配合js做王者荣耀3D旋转购买英雄效果以及源码展示...
展示gif效果图注:为了让大家可以直接pc端复制粘贴代码,不用自己敲,这里直接给大家上代码了! ******里面js部分运用一些很牛的算法促使运动之后有运动痕迹,这样有用缓冲效果! html: cs ...
css 文字 3d旋转动画,CSS3 简单的三维文字旋转动画
CSS 语言: CSSSCSS 确定 *, *:after, *:before { box-sizing: border-box; } html { height: 100vh; background ...
纯CSS3实现超酷炫的萤火虫动画
银烛秋光冷画屏,轻罗小扇扑流萤.仲夏之夜,花草从间,萤光舞动,构成一幅诗意的画面.如今用HTML5大显身手,可以做很多有意思的应用和游戏.今天我们要分享一个用纯CSS3做一个萤火虫动画的特效. 先来看 ...

html怎么让方块自动旋转,纯CSS3做的的3D旋转方块

html怎么让方块自动旋转,纯CSS3做的的3D旋转方块相关推荐

最新文章

热门文章