[CSS3] 3D桃心
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background:#000;
}
#heart{
width: 160px;
height: 160px;
margin: 200px auto;
transform-style: preserve-3d;/*设置3d环境*/
animation: rota 15s linear infinite;/*css3自定义动画 ：名称 时间 匀速 无限*/
-webkit-animation: rota 15s linear infinite;
}
@-webkit-keyframes rota{
to{
transform: rotateX(360deg) rotateY(360deg);
-webkit-transform: rotateX(360deg) rotateY(360deg);
}
}
#heart div.rot{
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 160px;
border: 1px solid red;
border-radius: 50% 50% 0/40% 50% 0;/*斜杠前面是水平方向 后面是竖直方向*/
border-width: 1px 1px 0 0; }
.cube{
position: relative;
width: 52px;
height: 52px; transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-webkit-transform: translateX(25px) translateY(56px) translateZ(30px);
}
.cube:hover{
transform: rotateY(360deg);
-webkit-transform: rotateY(360deg);
}
.cube div
{
position: absolute;
width: 52px;
height: 52px; }
.cube div:nth-child(1){/*结构伪类选择器*/
left: 0;
top: -52px;
/*transform-origin: 50% 50% 0;*/
transform-origin:bottom;
-webkit-transform-origin: bottom;
transform: rotateX(90deg);
-webkit-transform: rotateX(90deg);
}
.cube div:nth-child(2){/*结构伪类选择器*/
left: 0;
top: 52px;
transform-origin:top;
-webkit-transform-origin: top;
transform: rotateX(-90deg);
-webkit-transform: rotateX(-90deg);
}
.cube div:nth-child(3){/*结构伪类选择器*/
left: -52px;
top: 0;
transform-origin:right;
-webkit-transform-origin: right;
transform: rotateY(-90deg);
-webkit-transform: rotateY(-90deg);
}
.cube div:nth-child(4){/*结构伪类选择器*/
left: 52px;
top: 0;
transform-origin:left;
-webkit-transform-origin: left;
transform: rotateY(90deg);
-webkit-transform: rotateY(90deg);
}
.cube div:nth-child(5){/*结构伪类选择器*/
left: 0;
top: 0;
}
.cube div:nth-child(6){/*结构伪类选择器*/
left: 0;
top: 0;
transform: translateZ(-52px);
-webkit-transform: translateZ(-52px);
}
</style>
</head>
<body>
<div id="heart">
<div class="cube">
<div>
<img src="img/pic1.jpg" width="52" height="52" />
</div>
<div>
<img src="img/pic2.jpg" width="52" height="52" />
</div>
<div>
<img src="img/pic3.jpg" width="52" height="52" />
</div>
<div>
<img src="img/pic4.jpg" width="52" height="52" />
</div>
<div>
<img src="img/pic5.jpg" width="52" height="52" />
</div>
<div>
<img src="img/pic6.jpg" width="52" height="52" />
</div>
</div>
</div>
<div class="cube"></div>
</body>
</html>
<script>
var heart = document.getElementById('heart');
for (var i=0;i<36;i++) {
var oDiv = document.createElement('div');
oDiv.className = 'rot';
oDiv.style.transform = 'rotateY('+10*i+'deg) rotateZ(45deg)';
oDiv.style.webkitTransform = 'rotateY('+10*i+'deg) rotateZ(45deg) translateX(30PX)';
heart.appendChild(oDiv);
}
</script>
[CSS3] 3D桃心的更多相关文章
- 【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理
承接上一篇:[CSS3进阶]酷炫的3D旋转透视 . 最近入坑 Web 动画,所以把自己的学习过程记录一下分享给大家. CSS3 3D 行星运转 demo 页面请戳:Demo.(建议使用Chrome打开 ...
- 纯css3 3D图片立方体旋转动画特效
纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体 效果展示 手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8g ...
- CSS3 3D轮播主要可以分成这样的三类
中秋节假期这么快就没了,这几天还一直下雨,索性在家看看书.这次看的是Tom Lane的<A Tour of PostgreSQL Internals>.这篇小随笔就算做学习笔记了.园子里面 ...
- css3 3D旋转效果
css3 record2 css3 3D旋转效果 需理解transform css3知识: keyframes transform perspective jsfiddle demo keyframe ...
- [应用][js+css3]3D盒子导航[PC端]
CSS3构建的3D盒子之导航应用 1.在用css3构建的盒子表面,放上iframe,来加载导航页面. 2.鼠标左键按下移动可旋转盒子,寻找想要的网址. 3.左键单机盒子表面,将全屏现实所点盒子表面的网 ...
- HTML5之CSS3 3D transform 剖析式学习之一
最近坐地铁发现“亚洲动物基金”在地铁上做了很多公益广告,比较吸引人的是一个月熊的广告.做的很可爱.回去就搜了一下,发现这个网站是HTML5做的,非常炫. 所以想学习一下,方法就是传统的学习办法,模仿. ...
- 好吧，CSS3 3D transform变换，不过如此！
一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...
- CSS3 3D Transform
CSS3 3D Transform 原文:http://www.w3cplus.com/css3/css3-3d-transform.html 三维变换使用基于二维变换的相同属性,如果您熟悉二维变换, ...
- CSS3 3D变换
可以这么说,3D变换是基于三维坐标系的.以下是“盗用”的图 CSS3中的3D变换主要包括以下几个功能函数: 3D位移:包括translateZ()和translate3d(): 3D旋转:包括rota ...
随机推荐
- Hadoop Streaming：aggregate
[Hadoop Streaming:aggregate] 1.实例1 测试文件test.txt mapper程序: 运行: $hadoop streaming -input /app/test.txt ...
- go_封装
go语言中首字母大写表示public go语言中首字母小写表示private 结构定义的方法必须放在同一个包内 一个目录只能放一个包 如何扩充系统的类型或别人的类型: 1.定义别名 2.使用组合 使用 ...
- 【BZOJ4154】Generating Synergy【kd树】
题意 给定一棵以1为根的有根树,初始所有节点颜色为1,每次将距离节点a不超过l的a的子节点染成c,或询问点a的颜色 分析 我们以dfs序为横坐标,深度为纵坐标,建kd树.我们每次更新,都是在kd树中更 ...
- 27-python 画图
绝佳教程:http://pyecharts.org/#/zh-cn/prepare?id=%E4%BD%BF%E7%94%A8%E4%B8%BB%E9%A2%98安装 pyecharts pip in ...
- MacOS下打包Python应用
在MacOS下开发的Python应用,不是Web Application,开发好以后,如何给用户使用呢?用户的操作系统也是MacOS 使用py2app打包 一.软件环境 ...
- Python爬虫进阶四之PySpider的用法
审时度势 PySpider 是一个我个人认为非常方便并且功能强大的爬虫框架,支持多线程爬取.JS动态解析,提供了可操作界面.出错重试.定时爬取等等的功能,使用非常人性化. 本篇内容通过跟我做一个好玩的 ...
- mysql索引原理及用法
MySQL索引原理及慢查询优化 Mysql explain用法和性能分析 MySQL 索引优化全攻略 1．索引作用 在索引列上,除了上面提到的有序查找之外,数据库利用各种各样的快速定位技术,能够大大提 ...
- asp.net 在自己指定的文件夹下面弄个App.config来读取配置
.注意首先你要在你的应用程序的根目录下面新建一个Config的文件夹,然后在你新建的Config文件夹下面建立一个MyApp.config文件,根据标准的App.config复制一个过来稍作修改就好, ...
- iOS Orientation获取
[iOS Orientation获取] 1.[[UIDevice sharedInstance] orientation] 必须调用beginGeneratingDeviceOrientationNo ...
- 【转】WIFI基本知识整理
WIFI基本知识整理 这里对wifi的802.11协议中比较常见的知识做一个基本的总结和整理,便于后续的学习.因为无线网络中涉及术语很多,并且许多协议都是用英文描述,所以有些地方翻译出来会有歧义,这种 ...