案例：实现步骤

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. 轻轻松松学CSS：position

    position属性表示元素的定位类型,在CSS布局中,position发挥着非常重要的作用,一些元素的布局就是用position完成的,鉴于此,本文结合一些小实例详细讲解一下. position属性 ...

  2. 个人电脑搭建ftp----------------2

    个人电脑搭建ftp 从上一次搭建好的局域网继续完成我的后续. 打开windows10 控制面板 点击启用或关闭windows功能 找到Internet Information Services,开启所 ...

  3. Spring Security 实战干货：实现自定义退出登录

    文章目录 1. 前言 2. 我们使用 Spring Security 登录后都做了什么 2. 退出登录需要我们做什么 3. Spring Security 中的退出登录 3.1 LogoutFilte ...

  4. css实现网页缩放时固定定位的盒子与版心一同缩放

    在网页设计过程中我们可能会出现这种情况:设置好一个固定定位的盒子,但是当网页缩放时固定定位的盒子与网页的版心分离 这是因为css定位中的固定定位是以页面为参照进行定位的,而不是以版心盒子为参照,那么我 ...

  5. 为什么LinkedList不建议使用for循环遍历，而使用iterator方式进行遍历，但ArrayList建议使用for循环进行遍历呢？

    如果使用for循环方式遍历链表,由于链表中元素是通过指针连接彼此的,不存在索引的概念,如果使用for循环方式遍历LinkedList,依次传入索引值,则就相当于每次都要将链表撸一遍. 如:在下面的这个 ...

  6. Azure Kubernetes Service 入门

    一,引言 上一节,我们使用Azure CLI 创建了Azure Resource Group 和 Azure Container Registry 资源,并且将本地的一个叫 “k8s.net.demo ...

  7. 仿京东BOE官网 css代码

    * { margin: 0; padding: 0; border: 0; list-style: none; } .box { width: 1518px; height: 1300px; marg ...

  8. 如何为指定python解释器安装pip

    有时候我们通常会有很多python解释器,例如python2.python3.python(Anaconda). 参考链接:https://www.cnblogs.com/michaelcjl/p/1 ...

  9. WS以及NW小世界网络的生成（MATLAB）

    WS小世界网络生成算法,一般小世界网络生成算法速度慢,节点度分布与数学推导不符,在网络仿真中造成不便,这里针对实际网络动力学仿真过程撰写了WS小世界网络的MATLAB生成算法,并考虑了矩阵化,具有较高 ...

  10. 看视频常见的 720p、1080p、4k，这些分辨率到底包含了什么

    从早期的420p,到后来的720p,到现在的非1080p不看.视频的清晰度飞快提升,但是在看到色彩越来越丰富清晰度越来越高的画面时,你有关注过他们的到底是怎么做到的么?我们一起来了解一下吧. 想必大家 ...