案例：实现步骤

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:;

            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综合案例的更多相关文章

  1. JavaScript：综合案例-表单验证

    综合案例:表单验证 开发要求: 要求定义一个雇员信息的增加页面,例如页面名称为"emp_add.htmnl",而后在此页面中要提供有输入表单,此表单定义要求如下: .雇员编号:必须 ...

  2. DOM综合案例、SAX解析、StAX解析、DOM4J解析

    今日大纲 1.DOM技术对xml的增删操作 2.使用DOM技术完成联系人管理 3.SAX和StAX解析 4.DOM4J解析 5.XPATH介绍 1.DOM的增删操作 1.1.DOM的增加操作 /* * ...

  3. JavaEE Tutorials (30) - Duke综合案例研究示例

    30.1Duke综合应用的设计和架构456 30.1.1events工程458 30.1.2entities工程459 30.1.3dukes—payment工程461 30.1.4dukes—res ...

  4. jquery-easyUI第二篇【综合案例】

    基于easyUI开发的一个综合案例模版 <%@ page language="java" pageEncoding="UTF-8"%> <!D ...

  5. CSS3_综合案例

    综合案例 设置元素的 width,还可以利用 left 和 right 为了防止图片太小,background-size: 100% 100%; <!DOCTYPE html> <h ...

  6. Angular路由与多视图综合案例

    Ajax请求存在的几个问题 (1)Ajax请求不会留下History 记录,会导致浏览器后退按钮失效 (2)用户无法直接通过URL进入应用中的指定页面(保存书签.链接分享给朋友) (3)Ajax对SE ...

  7. Winform开发框架中的综合案例Demo

    在实际的系统开发中,我们往往需要一些简单的的案例代码,基于此目的我把Winform开发框架中各种闪光点和不错的功能,有些是我们对功能模块的简单封装,而有些则是引入了一些应用广泛的开源组件进行集成使用, ...

  8. 【原创 Hadoop&Spark 动手实践 13】Spark综合案例：简易电影推荐系统

    [原创 Hadoop&Spark 动手实践 13]Spark综合案例:简易电影推荐系统

  9. Ext.js入门：常用组件与综合案例（七）

    一:datefield简单示例 二:timefield简单示例 三:numberfield简单示例 四:FormPanel提交   datefield简单示例: <html xmlns=&quo ...

随机推荐

  1. 轻量级Java EE企业应用实战：Struts2+Spring5+Hibernate5/JPA2

    轻量级Java EE企业应用实战(第5版)——Struts 2+Spring 5+Hibernate 5/JPA 2整合开发是<轻量级Java EE企业应用实战>的第5版,这一版保持了前几 ...

  2. FCIS：Fully Convolutional Instance-aware Semantic Segmentation

    论文:Fully Convolutional Instance-aware Semantic Segmentation   目录 0.简介 1.Position-sensitive Score Map ...

  3. Ubuntu操作系统（文件传输）

    首先选择Ubuntu版本为偶数版本--(系统比较稳定软件源比较齐全) Ubuntu和windows之间的文件传输首先在Windows上安装连接工具winscp 在Ubuntu开启SSH服务(https ...

  4. 初识ABP vNext（5）：ABP扩展实体

    Tips:本篇已加入系列文章阅读目录,可点击查看更多相关文章. 目录 前言 开始 扩展实体 路由整理 最后 前言 上一篇实现了前端vue部分的用户登录和菜单权限控制,但是有一些问题需要解决,比如用户头 ...

  5. html的JavaScript的简单输入验证

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 从一个小需求感受Redis的独特魅力

    分享一个简单的小需求应该怎么设计实现以及有关Redis的使用 Redis在实际应用中使用的非常广泛,本篇文章就从一个简单的需求说起,为你讲述一个需求是如何从头到尾开始做的,又是如何一步步完善的. 需求 ...

  7. Locust性能测试1--简介安装及基本使用

    1. Locust简介 Locust是易于使用的分布式用户负载测试工具,旨在对网站(或其他系统)进行负载测试,并弄清一个系统可以处理多少个并发用户,Locust翻译过来是蝗虫的意思,在测试期间,意在一 ...

  8. Python 到底是强类型语言，还是弱类型语言？

    0.前言 我在上一篇文章中分析了 为什么 Python 没有 void 类型 的话题,在文章发布后,有读者跟我讨论起了另一个关于类型的问题,但是,我们很快就出现了重大分歧. 我们主要的分歧就在于:Py ...

  9. Istio安全-授权(实操三)

    Istio安全-授权 目录 Istio安全-授权 授权HTTP流量 为使用HTTP流量的负载配置访问控制 卸载 授权TCP流量 部署 配置TCP负载的访问控制 卸载 使用JWT进行授权 部署 使用有效 ...

  10. Java实现的二叉堆以及堆排序详解

    一.前言 二叉堆是一个特殊的堆,其本质是一棵完全二叉树,可用数组来存储数据,如果根节点在数组的下标位置为1,那么当前节点n的左子节点为2n,有子节点在数组中的下标位置为2n+1.二叉堆类型分为最大堆( ...