[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 ...

随机推荐

manjaro i3 配置笔记
更改国内源 sudo pacman-mirrors -GB testing -c China 增加Arch linuxcn源在/etc/pacman.conf文件末尾添加两行: [archlinux ...
Android给ListView添加一个入场动画
动画是一个App体现良好交互的一种手段,通常的我们会看到很多App的ListView的Item都有一个入场动画例如: 可以看到,当进入界面加载ListView的Item的时候有一个向左滑动显示,并且淡 ...
jqzoom插件图片放大功能的一些BUG
建议使用cloud-zoom插件,jqzoom插件就不要使用了点击查看——图片放大镜——jQuery插件Cloud Zoom 刚开始使用的是jqzoom插件,但问题太多了,就不说插入到页面中使用了, ...
POJ2533 最长递增子序列
描述: 7 1 7 3 5 9 4 8 输出4 最长递增子序列为1 3 5 9,不必连续. 解法: 三种思路: 转化为最长公共子序列(n^2),动态规划(n^2),不知叫什么解法(nlogn). 解法 ...
Eclipse 安装PyDev开发Python及初步使用
Eclipse 安装PyDev插件后可开发Python 参考网址:https://blog.csdn.net/wscdylzjy/article/details/44066977 具体请参考上述网址, ...
js日期格式化扩展Date()
javascript Date format(js日期格式化) 方法一: // 对Date的扩展,将 Date 转化为指定格式的String // 月(M).日(d).小时(H/h).分(m).秒(s ...
第七章资源在Windows编程中的应用 P157 7-8
资源在基于SDK的程序设计中的应用实验一.实验目的 1．掌握各种资源的应用及资源应用的程序设计方法. 二.实验内容及步骤实验任务 1.熟悉菜单资源的创建过程: 2.熟悉位图资源的创建: 3.熟 ...
Java 中的类
public class Test{ public static void main(String[] args){ Animal a1 = new Dog(); a1.shout();//编译通过 ...
Ubuntu 安装配置 nginx
作者:任明旭链接:https://www.zhihu.com/question/46241604/answer/100788789来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...
有些标签的class有多个值，用空格隔开的，是什么意思阿？
这个div同时应用了三个class.三个class的设置都会对它起作用,相互冲突时,越后面的class优先权越高.

[CSS3] 3D桃心

[CSS3] 3D桃心的更多相关文章

随机推荐

热门专题