纯CSS3实现旋转木马
test.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3旋转木马</title>
<link type="text/css" rel='stylesheet' href="test.css"></link>
</head>
<body>
<div class="box">
<div class="stage">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
test.css:
*{
margin:;
padding:;
}
.box{
margin: 100px auto;
perspective: 1000px;
}
.stage{
margin: 0 auto;
background: whitesmoke;
position: relative;
width: 200px;
height: 100px;
transform: rotateX(-8deg);
transform-style: preserve-3d;
animation: rot linear 6s infinite;
}
.stage div{
position: absolute;
width: 200px;
height: 100px;
}
.stage div:nth-child(1){
background-color: red;
transform: rotateY(0deg) translateZ(350px);
}
.stage div:nth-child(2){
background-color: orange;
transform: rotateY(60deg) translateZ(350px);
}
.stage div:nth-child(3){
background-color: yellow;
transform: rotateY(120deg) translateZ(350px);
}
.stage div:nth-child(4){
background-color: green;
transform: rotateY(180deg) translateZ(350px);
}
.stage div:nth-child(5){
background-color: blue;
transform: rotateY(240deg) translateZ(350px);
}
.stage div:nth-child(6){
background-color: blueviolet;
transform: rotateY(300deg) translateZ(350px);
}
.stage div:nth-child(7){
background-color: blanchedalmond;
transform: rotateY(90deg);
}
@keyframes rot{
from{transform: rotateX(-8deg) rotateY(0deg);}
to{transform: rotateX(-8deg) rotateY(-360deg);}
}
效果图:
可以将颜色换成图片。
纯CSS3实现旋转木马的更多相关文章
- 纯css3艺术文字样式效果代码
效果:http://hovertree.com/texiao/css3/1/ 本效果主要使用text-shadow实现.参考:http://hovertree.com/h/bjaf/css3_text ...
- 纯CSS3实现的一些酷炫效果
之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...
- 纯css3圆形从中心向四周扩散动画效果
查看效果:http://hovertree.com/texiao/css3/37/ 先来个简单的示例,例如: @keyframes hovertreemove{from {top:30px;}to { ...
- 纯css3 3D图片立方体旋转动画特效
纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体 效果展示 手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8g ...
- 纯CSS3实现多层云彩变换飞行动画
查看效果:http://hovertree.com/texiao/css3/4/效果2 效果图: 代码如下: <!doctype html> <html lang="zh& ...
- 纯css3手机页面图标样式代码
全部图标:http://hovertree.com/texiao/css/19/ 先看效果: 或者点这里:http://hovertree.com/texiao/css/19/hoverkico.ht ...
- 纯CSS3实现动态火车行驶特效
上次开完飞机,这次开火车 查看效果:http://hovertree.com/texiao/css3/7/ 效果图: 代码如下: <!DOCTYPE html> <html> ...
- [原创]纯CSS3打造的3D翻页翻转特效
刚接触CSS3动画,心血来潮实现了一个心目中自己设计的翻页效果的3D动画,页面纯CSS3,目前只能在Chrome中玩,理论上可以支持Safari. 1. 新建HTML,代码如下(数据和翻页后的数据都是 ...
- 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...
随机推荐
- leetcode 1.Two Sum 、167. Two Sum II - Input array is sorted 、15. 3Sum 、16. 3Sum Closest 、 18. 4Sum 、653. Two Sum IV - Input is a BST
1.two sum 用hash来存储数值和对应的位置索引,通过target-当前值来获得需要的值,然后再hash中寻找 错误代码1: Input:[3,2,4]6Output:[0,0]Expecte ...
- concatenate函数
numpy.concatenate((a1, a2, ...), axis=0) Join a sequence of arrays along an existing axis.(按轴axis连接a ...
- Qt之操作数据库(SQLite)实例
QtSql模块提供了与平台以及数据库种类无关的访问SQL数据库的接口,这个接口由利用Qt的模型视图结构将数据库与用户界面集成的一套类来支持.QSqlDatabase对象象征了数据库的关联.Qt使用驱动 ...
- `ECS弹性计算服务
云服务器(Elastic Compute Service 简称ECS)是一种简单高效,处理能力可弹性伸缩的计算服务.能快速构建更稳定.安全的应用,提升运维效率,降低IT成本. 云服务器ecs作用如下: ...
- geomesa hbase geoserver
在geoserver中配置hbase ln -s /root/hbase/hbase-1.4.8/conf/hbase-site.xml /root/tomcat/apache-tomcat-7.0. ...
- Vue学习—Vue写一个图片轮播组件
1.先看效果: 熟悉的图片轮播,只要是个网站,百分之90以上会有个图片轮播.我认为使用图片轮播. 第一可以给人以一种美观的感受,而不会显得网站那么呆板, 第二可以增加显示内容,同样的区域可以显示更多内 ...
- Xcode 5.1安装插件:规范凝视生成器VVDocumenter
类似java的多行凝视! 安装过程: 1.前往GitHub下载project文件:VVDocumenter-Xcode 2.用Xcode打开project,Command + B Build成功后,能 ...
- SQL Server 数据库每个表占用的空间、大小
查看MSSQL数据库每个表占用的空间大小 sp_spaceused显示行数.保留的磁盘空间以及当前数据库中的表所使用的磁盘空间,或显示由整个数据库保留和使用的磁盘空间. 语法sp_spaceused ...
- Spring Boot与Mybatis 借助Fastjson快速完成数据解析入库
通过Spring Boot可以快速搭建一个项目结构,在此基础上本文就通过一个简单的例子,说明如何结合Mybatis 和 Fastjson,快速的完成一个数据的入库基本操作. 添加相关的依赖 <d ...
- 【最新最全】为 iOS 和 Android 的真机和模拟器编译 Luajit 库
编译 Luajit 库,的确是一个挑战.因为官网的教程,在当前版本的 Xcode 和 NDK 环境中,已经不适用了.以前只是编译了适用于真机的 Luajit 库.最近在尝试编译模拟器 Luajit 库 ...