H5C3综合案例
案例：实现步骤
1. 搭建HTML结构
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
里面的6个div 分别是 6个狗狗图片
注意最终旋转是section标签 旋转
2. CSS样式
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:;
left:;
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>
H5C3综合案例的更多相关文章
- JavaScript：综合案例-表单验证
综合案例:表单验证 开发要求: 要求定义一个雇员信息的增加页面,例如页面名称为"emp_add.htmnl",而后在此页面中要提供有输入表单,此表单定义要求如下: .雇员编号:必须 ...
- DOM综合案例、SAX解析、StAX解析、DOM4J解析
今日大纲 1.DOM技术对xml的增删操作 2.使用DOM技术完成联系人管理 3.SAX和StAX解析 4.DOM4J解析 5.XPATH介绍 1.DOM的增删操作 1.1.DOM的增加操作 /* * ...
- JavaEE Tutorials (30) - Duke综合案例研究示例
30.1Duke综合应用的设计和架构456 30.1.1events工程458 30.1.2entities工程459 30.1.3dukes—payment工程461 30.1.4dukes—res ...
- jquery-easyUI第二篇【综合案例】
基于easyUI开发的一个综合案例模版 <%@ page language="java" pageEncoding="UTF-8"%> <!D ...
- CSS3_综合案例
综合案例 设置元素的 width,还可以利用 left 和 right 为了防止图片太小,background-size: 100% 100%; <!DOCTYPE html> <h ...
- Angular路由与多视图综合案例
Ajax请求存在的几个问题 (1)Ajax请求不会留下History 记录,会导致浏览器后退按钮失效 (2)用户无法直接通过URL进入应用中的指定页面(保存书签.链接分享给朋友) (3)Ajax对SE ...
- Winform开发框架中的综合案例Demo
在实际的系统开发中,我们往往需要一些简单的的案例代码,基于此目的我把Winform开发框架中各种闪光点和不错的功能,有些是我们对功能模块的简单封装,而有些则是引入了一些应用广泛的开源组件进行集成使用, ...
- 【原创 Hadoop&Spark 动手实践 13】Spark综合案例：简易电影推荐系统
[原创 Hadoop&Spark 动手实践 13]Spark综合案例:简易电影推荐系统
- Ext.js入门：常用组件与综合案例（七）
一:datefield简单示例 二:timefield简单示例 三:numberfield简单示例 四:FormPanel提交 datefield简单示例: <html xmlns=&quo ...
随机推荐
- （转）软件产品化，国内IT人之痛
原文链接:http://blog.csdn.net/harrymeng/article/details/5254415 记得在网上看过一则印度软件的有趣故事,意思是先从印度6个不同城市的软件公司中选出 ...
- 解决MySql Access denied for user 'root'@'192.168.1.119' to databse 的问题
因为ip未授权,在navicat中执行 grant all privileges on *.* to 'root'@'192.168.1.119' identified by 'root' with ...
- springboot 新建的时候 pom 第一行出现红叉，项目可以正常运行
原因 : maven的插件版本的问题,造成与IDE的不兼容 解决办法 :在pom中加上 <maven-jar-plugin.version>3.1.1</maven-jar-plug ...
- Debian 镜像使用帮助
链接: Debian 镜像使用帮助 buster: # 默认注释了源码镜像以提高 apt update 速度,如有需要可自行取消注释 deb https://mirrors.tuna.tsinghua ...
- CSS动画实例：行星和卫星
设页面中有<div class=" planet "></div>,用来绘制一个行星和卫星图形.这个图形包括三部分:行星.卫星和卫星旋转的轨道.定义. pl ...
- Jenkins匿名用户设置
最近自己安装配置jenkins,但是跑任务时,发现是匿名账户登录,可以在系统设置中点击如下: 2.勾选“启用安全”,“访问控制”>“安全域”选择“Jenkins专有用户数据库”,并勾选“允许用户 ...
- Oracle数据库教程-数据定义语言（表操作）
创建表 建表语法: CREATE TABLE 表名 ( 列1 数据类型 [primary key], 列2 数据类型 default 默认值 [not null], …, constraint 约束名 ...
- python笔记-正则表达式
什么是正则表达式: 正则表达式是一个特殊的字符序列,能帮助我们方便的检查一个字符串是否与某种模式匹配(定义往往都很枯燥) 也称之为”模式“,即可用于检查一个给定的字符串是否符合某种模式 举例: 我们定 ...
- PyCharm切换解释器版本
Mac PyCharm > Preferences... > Project Interpreter > Python Interpreters Windows File->D ...
- A Walk Through the Forest (最短路+记忆化搜索)
Jimmy experiences a lot of stress at work these days, especially since his accident made working dif ...