CSS3 @keyframes 实现匀速旋转魔方(搬运工)
原博文 * https://www.cnblogs.com/shihao905/p/6208324.html
* html
<div id="wrap">
<div class="wrap">
<div class="red">
</div>
<div class="blue">
</div>
<div class="green">
</div>
<div class="orange">
</div>
<div class="white">
</div>
<div class="yellow">
</div>
</div>
</div>
* css
@keyframes box {
0% {
transform: rotatex(0deg) rotateY(0deg) rotateZ(0deg);
}
100% {
transform: rotatex(360deg) rotateY(360deg) rotateZ(360deg);
}
}
#wrap {
width: 400px;
height: 400px;
padding: 100px;
margin: 150px auto;
perspective: 1200px;
}
.wrap {
width: 400px;
height: 400px;
transition: 5s;
transform-style: preserve-3d;
position: relative;
animation: box 10s linear infinite;
transform-origin: center center -200px;
;
}
.wrap div:nth-of-type(1) {
position: absolute;
background: #fe0000;
background-image: url('http://img1.gtimg.com/tj/pics/hv1/117/208/2153/140051982.jpg');
right: -400px;
top: 0;
transform: rotateY(90deg);
transform-origin: left;
}
.wrap div:nth-of-type(2) {
position: absolute;
background: #0000fe;
background-image: url('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=841408372,3004217725&fm=11&gp=0.jpg');
bottom: -400px;
left: 0;
transform: rotatex(-90deg);
transform-origin: top;
}
.wrap div:nth-of-type(3) {
position: absolute;
background: #00ff01;
background-image: url('https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2388632836,3966607624&fm=26&gp=0.jpg');
bottom: 0px;
left: 0;
backface-visibility: hidden;
}
.wrap div:nth-of-type(4) {
position: absolute;
background: #ff610a;
background-image: url('https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=192610795,467565159&fm=26&gp=0.jpg');
bottom: 0px;
left: -400px;
transform: rotateY(-90deg);
transform-origin: right;
}
.wrap div:nth-of-type(5) {
position: absolute;
background: #fff;
background-image: url("https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2936477803,4198185787&fm=15&gp=0.jpg");
top: -400px;
left: 0;
transform: rotatex(90deg);
transform-origin: bottom;
}
.wrap div:nth-of-type(6) {
position: absolute;
background: #ffff00;
background-image: url('http://img0.pclady.com.cn/pclady/1611/02/1612285_jyz.jpg');
bottom: 0px;
left: 0;
transform: translateZ(-400px);
}
.wrap div {
border-radius: 4px;
overflow: hidden;
width: 400px;
height: 400px;
}
CSS3 @keyframes 实现匀速旋转魔方(搬运工)的更多相关文章
- CSS动画之旋转魔方轮播
很久没有回头来复习CSS方面的知识了, 正好又到了月底写文章的deadline......所以这次选择了详细巩固一下CSS3动画有关的知识点,因为之前只是用过一些属性并没有深究细节. 在我自己写完这篇 ...
- 纯CSS做3D旋转魔方
昨天偶然看见网友(简单说 用CSS做一个魔方旋转的效果)做的一个3D旋转魔方 效果就是本博客右侧公告栏所示 在这里把做法展现出来 感兴趣的可以试试 做成自己特有的魔方 <!DOCTYPE h ...
- 用css3实现摩天轮旋转的动画效果
用css3实现摩天轮旋转的动画效果 1.CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes 规则.@keyframes 规则用于创建动画.在 @keyf ...
- 基于css3的3D立方体旋转特效
今天给大家分享一款基于css3的3D立方体旋转特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下 : ...
- CSS3 @keyframes 规则
今天来给大家分享一下CSS3 @keyframes 规则! 在你了解CSS3 @keyframes 规则时我先来给大家说说什么是css3中的动画 动画是使元素从一种样式逐渐变化为另一种样式的效果. 您 ...
- 纯css3实现的圆形旋转分享按钮
之前已经为大家介绍了好几款css3按钮,今天要为大家介绍的是一款纯css3实现的圆形旋转分享按钮.旋转的角度可以自己调整.在demo中演示了三个角度旋转.360度,60度,-360度.如图: 在线预览 ...
- 一款基于css3鼠标经过圆形旋转特效
今天给大家分享一款基于css3鼠标经过圆形旋转特效.当鼠标经过的时候图片边框颜色旋转,图片显示详情.该实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗 ...
- CSS3实现3D木块旋转动画
CSS3实现3D木块旋转动画,css3特效,旋转动画,3D,立体效果,CSS3实现3D木块旋转动画是一款迷人的HTML5+CSS3实现的3D旋转动画. 代码下载:http://www.huiyi8.c ...
- Android中让View匀速旋转
项目需求,需要一个实现一个单帧的旋转动画,来提示当前进度,类似与圆圈型的progressbar. 首先定义anim文件: [html] view plaincopyprint? 1. < ...
随机推荐
- linux系统基础优化及高级操作命令
Linux基础系统优化 引言没有,只有一张图. Linux的网络功能相当强悍,一时之间我们无法了解所有的网络命令,在配置服务器基础环境时,先了解下网络参数设定命令. ifconfig 查询.设置网卡和 ...
- 【Spark机器学习速成宝典】模型篇07梯度提升树【Gradient-Boosted Trees】(Python版)
目录 梯度提升树原理 梯度提升树代码(Spark Python) 梯度提升树原理 待续... 返回目录 梯度提升树代码(Spark Python) 代码里数据:https://pan.baidu.co ...
- Netem参数说明
Netem参数说明 本文主要内容来自Linux基金会Wiki网站Netem文档,点击这里访问原文 netem通过模拟广域网的特性为测试协议提供网络仿真功能.当前版本模拟可变延迟,丢失,重复和重新排序. ...
- gradle 离线模式offline 用法
1. 离线模式 offline所谓离线模式offline,就是gradle在解析依赖的时候采用本地的依赖库(如 GRADLE_USER_HOME指定的路径),而不是依据项目build.gradle文件 ...
- VSCode添加 console.log 快捷键
file - preferences - keyboard shortcuts - keybindings.json: 添加: { "key": "ctrl+ ...
- SQL Server 批量创建作业(备份主分区)
一. 需求背景 在我的数据库实例中,有很多类似下图所示的数据库,这些数据库的名称是有规律的,每个数据库包含的表都是相同的,其中2个表是类似流水记录的表,表的数据量会比较大,占用的空间有几十G到上百G不 ...
- harbor无法上传镜像解决
报错:[root@bogon harbor]# docker login 192.168.43.65:5000Username (admin): Password: Login Succeeded [ ...
- ABAP的smartform赋值
添加文本后, 在输出选项中指定行/列
- appium+python+安卓模拟器环境搭建和启动app实例
本文主要介绍在windows环境下搭建app自动化测试环境,具体步骤如下: 1.下载安卓sdk,网上很多资源 2.下载并安装安卓模拟器,官网上有 删除bin文件下的adb.exe和nox_adb.ex ...
- sublime3配置php开发环境
Sublime3 3143 1.用包管理器安装SublimeLinter ctrl+shift+p Package Control: install package SublimeLinter 注意: ...