[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 ...
随机推荐
- linux 使用systemctl 启动服务报错: Error: No space left on device
By default, Linux only allocates 8192 watches for inotify, which is ridiculously low. And when it ru ...
- S 联系人新增及更新
一.联系人新增 [Public] ConnectString=host="siebel://10.10.1.139:2321/SBA_82/SMObjMgr_chs ConnectUserN ...
- 录制手机的视频，转换成gif
Android: 通过adb命令去进行录屏,然后将录制的视频转换成gif图片: 前提:确保电脑上安装了adb,且Android的level高于19. 1.adb shell screenrecord ...
- java反射之ClassLoader
类加载器ClassLoader ClassLoader能在运行时, 知道任意一个类的的所有属性和方法:对于任意一个对象,都能够调用它的任意方法和属性. 一.类加载器的工作机制 1:加载Jvm把clas ...
- 17.Letter Combinations of a Phone Number(Back-Track)
Given a digit string, return all possible letter combinations that the number could represent. A map ...
- 7-n!的位数（斯特灵公式）
http://acm.hdu.edu.cn/showproblem.php?pid=1018 Big NumberTime Limit: 2000/1000 MS (Java/Others) Memo ...
- Linux confluence5.8.10 wiki安装
选择首先需要java环境 其次需要mysql mysql安装请参考: http://www.cnblogs.com/syuf/p/7818710.html 安装好mysql之后,创建一个库 # mys ...
- gnuc与ansic
GNU c与标准c的区别 1) 零长度数组 struct var_data { int len; char data[0]; }test: int a; test.data -->a 2)cas ...
- Spring MVC的handlermapping之请求分发如何找到正确的Handler(BeanNameUrlHandlerMapping,SimpleUrlHandlerMapping)
本文讲的是Spring MVC如何找到正确的handler, 前面请求具体怎么进入到下面的方法,不再细说. 大概就是Spring mvc通过servlet拦截请求,实现doService方法,然后进入 ...
- Mysal表类型的区别-MyISAM，InnoDB
1/ISAM ISAM是一个定义明确且历经时间考验的数据表格管理方法,它在设计之时就考虑到数据库被查询的次数要远大于更新的次数.因此,ISAM执行读取操作的速度很快,而且不占用大量的内存和存储资源.I ...