[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 ...
随机推荐
- JSTL的基本使用
<body> <% request.setAttribute("name", "lisi123"); request.setAttribute ...
- rook issues
ceph-volumeattacher: failed rbd single_major check, assuming it's unsupported: failed to check for r ...
- tomcat启动一闪而过，调试tomcat
参考地址:https://blog.csdn.net/baidu_32739019/article/details/64155136
- [/usr/local/openssl//.openssl/include/openssl/ssl.h] Error 127
/bin/sh: line 2: ./config: No such file or directorymake[1]: *** [/usr/local/ssl/.openssl/include/op ...
- soapUI参数中文乱码问题解决方法&soap UI工具进行web接口测试
soapUI参数中文乱码问题解决方法 可能方案1: 字体不支持中文,将字体修改即可: file-preferences-editor settings-select font 修改字体,改成能显示中文 ...
- set 续3
-------siwuxie095 set 技巧高级篇: 1.利用 set /a 进行赋值 在开启变量延迟情况下,要判断数组 S!n! 的值的情况, 不 ...
- qt4代码到qt5代码出错
1.error C2039: “toAscii”: 不是“QString”的成员 QT5.0.1把这个函数取消掉了,可以用toLatin1这个函数
- GPS坐标转换为百度地图坐标
/** * GPS坐标转换为百度地图坐标 * 需要引入javabase64.jar 和json的一些包 * */ public class Gps2BaiDu { public static void ...
- guestfish修改镜像内容
1.安装guestfish yum install libguestfs-tools 注意,如果要修改windows镜像需要安装 yum install libguestfs-winsupport 2 ...
- Converting HTML to PDF with pdfHTML
https://itextpdf.com/itext7/pdfHTML pdfHTML 的一个例子 一个基本的例子将显示使用 pdfHTML.为此, 我们将使用下面的 HTML 和 CSS. < ...