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

随机推荐

ansible Developing Plugins
Action plugins是模块的前端,可以在调用模块本身之前对控制器执行操作. Cache plugins用于保存“facts”的缓存,以避免代价高昂的fact-gathering操作. Call ...
JSP中系统Date的几点不符合中国时间观的地方
正常调用系统时间的显示格式是Date date = new Date 显示出来的当前时间为Sun Nov 22 18:39:51 CST 2015 星期天的英文单词是Sun, 这个大家都是熟悉的, 这 ...
通过@Configuratin配置Bean
Spring的依赖注入可以基于xml配置,也可以基于注解配置,还可以基于java类配置. 普通的bean类,只要标注了@Configuration注解,就可以为Spring容器提供Bean定义的信息. ...
java用while循环设计轮询线程的性能问题
java用while循环设计轮询线程的性能问题轮询线程在开发过程中的应用是比较广泛的,在这我模拟一个场景,有一个队列和轮询线程,主线程往队列中入队消息,轮询线程循环从队列中读取消息并打印消息内容.有 ...
图片放大镜——jQuery插件Cloud Zoom
下载地址:cloud_zoom.rar 图片放大镜效果是一种不错的效果,多应用于电子商务.图片展示等网站,给用户带来更好的体验.实现这种效果的代码不少,今天要给大家介绍的是 Cloud Zoom,它是 ...
PHP GD库
<?php $file = '12.jpg'; //打开图片 $im = imagecreatefromjpeg($file); //设置水印字体颜色 $color = imagecoloral ...
edis.clients.jedis.exceptions.JedisDataException: MISCONF Redis is configured to save RDB snapshots,
edis.clients.jedis.exceptions.JedisDataException: MISCONF Redis is configured to save RDB snapshots ...
POJ 2778 DNA Sequence (AC自动机+DP+矩阵)
题意:给定一些串,然后让你构造出一个长度为 m 的串,并且不包含以上串,问你有多少个. 析:很明显,如果 m 小的话 ,直接可以用DP来解决,但是 m 太大了,我们可以认为是在AC自动机图中,根据离散 ...
看图说说JVM老年代垃圾收集器
注:G1垃圾收集器是目前最前沿的GC收集器,未来将取代CMS垃圾收集器,可以作为整个Heap的收集器使用,不限于老年代!!!
Hello_Motion_Tracking 任务一：Project Tango采集运动追踪数据
我们来看一下中的几个基本的例子 (区域描述.深度感知.运动追踪.视频4个) 参考:Google Tango初学者教程 1. hello_motion_tracking package com.proj ...

[CSS3] 3D桃心

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

随机推荐

热门专题