[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 ...
随机推荐
- 【独家】阿里天池IJCAI17大赛第四名方案全解析（附代码）
[独家]阿里天池IJCAI17大赛第四名方案全解析(附代码) https://mp.weixin.qq.com/s?__biz=MzAxMzA2MDYxMw==&mid=2651560625& ...
- 【Git】一、Git简介
一.什么是Git Git是一款免费的开源分布式版本控制系统,可以有效的,高速的处理从很小到非常大的文件. 二.Git VS SVN 1. Git 是分布式的,SVN 是集中式的 2. Git 存储的是 ...
- intellij idea15，SVN commit file提示No changes detected
备注:我用的intellij 15,已经配置了SVN.且我的工程是从SVN导出的 遇到的问题:Subversion提交代码时提示No changes detected,当然新文件想要add也是选项 ...
- 「红米 2A 标准版」闪屏救砖、更正官方线刷救砖工具
问题描述 用 ES 浏览器 卸载了内置软件后重启无法开机,停在 MI android 界面并出现屏幕忽明忽暗的现象,无法进入系统. 漫长的救砖探索,直白的解决方案 总体来说,林林总总下了六个 G 的教 ...
- MongoDB--CSharp Driver Quickstart .
原文链接 http://www.mongodb.org/display/DOCS/CSharp+Driver+Quickstart?showComments=true&showCommentA ...
- 除了DFS的空间恒定为宽度*深度之外，其余都是宽度^深度次方
- win8上部署.net4.0程序到iis
在win8.1上默认的iis版本为8.5版,不做任何配置回报3个错误, 一下是错误提示内容及解决方案 1>HTTP 错误 404.3 – Not Found由于扩展配置问题而无法提供您请求的页面 ...
- Golang笔记之变量
哈哈 package main // 关键字var 声明变量 类型信息放在变量名后 //声明一个int型变量 var v1 int //声明一个string类型 var v2 string //声明多 ...
- Openssl dgst命令
一.简介 消息摘要可以对任意长度的消息产生固定长度(16或20个字节)的信息摘要,理论基于单向HASH函数,根据消息摘要无法恢复出原文,所以是安全的:消息原文和消息摘要是一一对应的,所以又被称作指纹. ...
- 如何求数字n的因数个数及因数和
我们有可能在某些数学题中会求到某个数的因数和,那我们怎么求呢? 因为我们知道任意一个合数都可以由两个或多个质数相乘得到,那么我们就先分解质因数吧 例:我们随便去一个数吧,嗯,就108了,好算... 我 ...