H5C3综合案例
时间:2022-07-28
本文章向大家介绍H5C3综合案例,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
案例:实现步骤
1. 搭建HTML结构
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
里面的6个div 分别是 6个狗狗图片 注意最终旋转是section标签 旋转
2. CSS样式
1>给body添加 透视效果 perspective: 1000px; 2>给section 添加 大小,一定不要忘记添加 3d呈现效果控制里面的6个div 3>别忘记子绝父相,section要加相对定位 4>里面6个div 全部绝对定位叠到一起,然后移动不同角度旋转和距离 注意:旋转角度用rotateY 距离 肯定用 translateZ来控制 给section 添加动画animation ,让它可以自动旋转即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
perspective: 1000px;
}
section {
position: relative;
width: 300px;
height: 200px;
margin: 150px auto;
transform-style: preserve-3d;
/* 添加动画效果 */
animation: rotate 10s linear infinite;
background: url(media/pig.jpg) no-repeat;
}
section:hover {
/* 鼠标放入section 停止动画 */
animation-play-state: paused;
}
@keyframes rotate {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(360deg);
}
}
section div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(media/dog.jpg) no-repeat;
}
section div:nth-child(1) {
transform: rotateY(0) translateZ(300px);
}
section div:nth-child(2) {
/* 先旋转好了再 移动距离 */
transform: rotateY(60deg) translateZ(300px);
}
section div:nth-child(3) {
/* 先旋转好了再 移动距离 */
transform: rotateY(120deg) translateZ(300px);
}
section div:nth-child(4) {
/* 先旋转好了再 移动距离 */
transform: rotateY(180deg) translateZ(300px);
}
section div:nth-child(5) {
/* 先旋转好了再 移动距离 */
transform: rotateY(240deg) translateZ(300px);
}
section div:nth-child(6) {
/* 先旋转好了再 移动距离 */
transform: rotateY(300deg) translateZ(300px);
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>
- Lucene.Net 删除索引DeleteDocuments的注意事项
- 使用VS2010的Database 项目模板统一管理数据库对象
- 利用c#制作托盘程序,并禁止多个应用实例运行
- dotNET跨平台相关文档整理
- .NET Core 2.0 正式发布信息汇总
- iis7.0上发布mvc4.0网站
- 遍历文件夹所有文件(示例)
- Visual Studio 2017 : client version 1.22 is too old
- httphandler和httpmodule的区别
- 每周.NET前沿技术文章摘要(2017-06-21)
- Access数据库多表连接查询
- Lucene2.1 的官方示例代码
- 使用NUnit在.Net编程中进行单元测试
- 在CentOS上使用Jexus托管运行 ZKEACMS
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- (十二) 整合spring cloud云架构 - SSO单点登录之OAuth2.0 登出流程(3)
- 树莓派定时任务不生效
- 树莓派备份系统镜像并压缩
- 树莓派Redis集群部署
- Linux防止ssh暴力破解常用方案
- 实用!8个 chrome插件玩转GitHub,单个文件下载小意思
- LeetCode105|有序数组的平方
- LeetCode104|求根到叶子节点数字之和
- LeetCode103|路径总和II
- LeetCode102|二叉树的所有路径
- LeetCode101|路径总和
- LeetCode100|两个数组的交集II
- LeetCode108|数组中重复的数字
- LeetCode107|从上打印二叉树
- LeetCode106|从尾到头打印链表