[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 ...
随机推荐
- SIEBEL GET最新时提示表异常
无法GET最新,则将此表GET一次,CHECK OUT下来,再UNDO CHECK IN即可
- 在Spring使用junit注解进行单元测试
在Spring中可以使用junit配合注解进行单元测试 一.常用注解 1.@RunWith(SpringJUnit4ClassRunner.class),让测试运行于spring测试环境2.@Cont ...
- linux shell脚本编程笔记（五）： 重定向
I/O重定向 简述: 默认情况下始终有3个"文件"处于打开状态, stdin (键盘), stdout (屏幕), and stderr (错误消息输出到屏幕上). 这3个文件和其 ...
- leetcode 1 A+B problems
描述: 给个数组和整数t,一串整数中,存在两个数其和等于t,求这两个数的索引. 解决: 想要快,用个哈希储存曾经出现过的数的索引. vector<int> twoSum(vector< ...
- Redis高可用及分片集群
一.主从复制 使用异步复制 一个服务器可以有多个从服务器 从服务器也可以有自己的从服务器 复制功能不会阻塞主服务器 可以通过服务功能来上主服务器免于持久化操作,由从服务器去执行持久化操作即可. 以下是 ...
- Python操作mysql之模块pymysql
pymsql是Python中操作MySQL的模块,其使用方法和MySQLdb几乎相同.但目前pymysql支持python3.x而后者不支持3.x版本. 本文环境 python3.6.1 Mysql ...
- Linux命令：cp (copy)复制文件或目录
复制文件,只有源文件较目的文件的修改时间新时,才复制文件 cp -u -v file1 file2 .将文件file1复制成文件file2 cp file1 file2 .采用交互方式 ...
- 禁止进入activity自动弹出键盘
禁止进入activity自动弹出键盘 在Manifest.xml中设定activity的属性 android:windowSoftInputMode="stateHidden|stateUn ...
- CPU位数、地址线位数、数据线位数、通用寄存器位数！
CPU位数:表示的是其通用寄存器的位数,CPU的位数表示该CPU一次处理数据的最大位数. 数据线位数:是CPU的理论最大寻址空间,也是CPU与内存之间一次最大的数据传输位数. 地址线位数:是CPU实际 ...
- metasploit-数据库支持
db_status db_disconnect db_connect 用户名:口令@服务器地址:端口/数据库名称 createdb msf4 -E UTF8 -T template0 -o msf3 ...