博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
html如何实现3d动画,[HTML5] HTML5 3D爱心动画及其制作过程
阅读量:4318 次
发布时间:2019-06-06

本文共 5726 字,大约阅读时间需要 19 分钟。

.heart3d{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:100px;height:160px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-animation:spin 15s infinite linear;animation:spin 15s infinite linear;

}.heart3d [class^="rib"]{position:absolute;width:100px;height:160px;border:solid #f22613;border-width:1px 1px 0 0;border-radius:50% 50% 0 / 40% 50% 0;

}.heart3d [class$="1"]{-webkit-transform:rotateY(10deg) rotateZ(45deg) translateX(30px);transform:rotateY(10deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="2"]{-webkit-transform:rotateY(20deg) rotateZ(45deg) translateX(30px);transform:rotateY(20deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="3"]{-webkit-transform:rotateY(30deg) rotateZ(45deg) translateX(30px);transform:rotateY(30deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="4"]{-webkit-transform:rotateY(40deg) rotateZ(45deg) translateX(30px);transform:rotateY(40deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="5"]{-webkit-transform:rotateY(50deg) rotateZ(45deg) translateX(30px);transform:rotateY(50deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="6"]{-webkit-transform:rotateY(60deg) rotateZ(45deg) translateX(30px);transform:rotateY(60deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="7"]{-webkit-transform:rotateY(70deg) rotateZ(45deg) translateX(30px);transform:rotateY(70deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="8"]{-webkit-transform:rotateY(80deg) rotateZ(45deg) translateX(30px);transform:rotateY(80deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="9"]{-webkit-transform:rotateY(90deg) rotateZ(45deg) translateX(30px);transform:rotateY(90deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="10"]{-webkit-transform:rotateY(100deg) rotateZ(45deg) translateX(30px);transform:rotateY(100deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="11"]{-webkit-transform:rotateY(110deg) rotateZ(45deg) translateX(30px);transform:rotateY(110deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="12"]{-webkit-transform:rotateY(120deg) rotateZ(45deg) translateX(30px);transform:rotateY(120deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="13"]{-webkit-transform:rotateY(130deg) rotateZ(45deg) translateX(30px);transform:rotateY(130deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="14"]{-webkit-transform:rotateY(140deg) rotateZ(45deg) translateX(30px);transform:rotateY(140deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="15"]{-webkit-transform:rotateY(150deg) rotateZ(45deg) translateX(30px);transform:rotateY(150deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="16"]{-webkit-transform:rotateY(160deg) rotateZ(45deg) translateX(30px);transform:rotateY(160deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="17"]{-webkit-transform:rotateY(170deg) rotateZ(45deg) translateX(30px);transform:rotateY(170deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="18"]{-webkit-transform:rotateY(180deg) rotateZ(45deg) translateX(30px);transform:rotateY(180deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="19"]{-webkit-transform:rotateY(190deg) rotateZ(45deg) translateX(30px);transform:rotateY(190deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="20"]{-webkit-transform:rotateY(200deg) rotateZ(45deg) translateX(30px);transform:rotateY(200deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="21"]{-webkit-transform:rotateY(210deg) rotateZ(45deg) translateX(30px);transform:rotateY(210deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="22"]{-webkit-transform:rotateY(220deg) rotateZ(45deg) translateX(30px);transform:rotateY(220deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="23"]{-webkit-transform:rotateY(230deg) rotateZ(45deg) translateX(30px);transform:rotateY(230deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="24"]{-webkit-transform:rotateY(240deg) rotateZ(45deg) translateX(30px);transform:rotateY(240deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="25"]{-webkit-transform:rotateY(250deg) rotateZ(45deg) translateX(30px);transform:rotateY(250deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="26"]{-webkit-transform:rotateY(260deg) rotateZ(45deg) translateX(30px);transform:rotateY(260deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="27"]{-webkit-transform:rotateY(270deg) rotateZ(45deg) translateX(30px);transform:rotateY(270deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="28"]{-webkit-transform:rotateY(280deg) rotateZ(45deg) translateX(30px);transform:rotateY(280deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="29"]{-webkit-transform:rotateY(290deg) rotateZ(45deg) translateX(30px);transform:rotateY(290deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="30"]{-webkit-transform:rotateY(300deg) rotateZ(45deg) translateX(30px);transform:rotateY(300deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="31"]{-webkit-transform:rotateY(310deg) rotateZ(45deg) translateX(30px);transform:rotateY(310deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="32"]{-webkit-transform:rotateY(320deg) rotateZ(45deg) translateX(30px);transform:rotateY(320deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="33"]{-webkit-transform:rotateY(330deg) rotateZ(45deg) translateX(30px);transform:rotateY(330deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="34"]{-webkit-transform:rotateY(340deg) rotateZ(45deg) translateX(30px);transform:rotateY(340deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="35"]{-webkit-transform:rotateY(350deg) rotateZ(45deg) translateX(30px);transform:rotateY(350deg) rotateZ(45deg) translateX(30px);

}.heart3d [class$="36"]{-webkit-transform:rotateY(360deg) rotateZ(45deg) translateX(30px);transform:rotateY(360deg) rotateZ(45deg) translateX(30px);

}

转载地址:http://jkgzs.baihongyu.com/

你可能感兴趣的文章
缺陷跟踪系统Mantis之安装篇(转载)
查看>>
UI1_UITableViewHomeWork
查看>>
简单解析依赖注入(控制反转)在Spring中的应用
查看>>
NoSQL 简介及什么是AICD
查看>>
hibernate+mysql的连接池配置
查看>>
条件运算符 (?:)
查看>>
javascript Array(数组)
查看>>
HDU1518 Square 【剪枝】
查看>>
桥接模式
查看>>
crm查询记录共享给了哪些人
查看>>
android windows 上JNI编程
查看>>
现代信息环境中的云计算
查看>>
PHP中可变变量到底有什么用?
查看>>
谈一谈最近关闭的Kindle人论坛
查看>>
mysql 常用命令行
查看>>
PDF.NET数据开发框架 之SQL-MAP使用存储过程
查看>>
如何用eclipse运行导入的maven项目
查看>>
svn服务器安装
查看>>
arya使用流程
查看>>
最近要做的事
查看>>