3D 旋转木马是CSS中常见的特效之一，旋转木马可以有多种方法实现，这里我使用纯CSS实现这种动画的效果。

简要介绍一下重点

  1. transform: rotateY(60deg) translateZ(300px);
    这是必须先旋转后 沿着z轴移动，不然会错乱，translateZ是沿着Z轴移动，其值越大，我们看见的图像就越大。
  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  
  4.  <head>
  5.      <meta charset="UTF-8">
  6.      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.      <title>Document</title>
  8.      <style>
  9.          body {
  10.              perspective: 1000px;
  11.          }
  12.  
  13.          section {
  14.              position: relative;
  15.              width: 300px;
  16.              height: 200px;
  17.              margin: 150px auto;
  18.              transform-style: preserve-3d;
  19.              animation: roate 10s linear infinite;
  20.          }
  21.  
  22.          section div {
  23.              position: absolute;
  24.              top:;
  25.              left:;
  26.              width: 100%;
  27.              height: 100%;
  28.              /* background: url(media/dog.jpg) no-repeat; */
  29.              background-color: yellow;
  30.          }
  31.  
  32.          section:hover {
  33.              animation-play-state: paused;
  34.          }
  35.  
  36.          @keyframes roate {
  37.              0% {
  38.                  transform: rotateY(0);
  39.              }
  40.              100% {
  41.                  transform: rotateY(360deg);
  42.              }
  43.          }
  44.  
  45.          section div:nth-child(1) {
  46.              transform: rotateY(0) translateZ(300px);
  47.              /* 可以添加自己想添加的图片 这里用背景色pink代替 下面都一样*/
  48.              background-color: pink;
  49.          }
  50.  
  51.          section div:nth-child(2) {
  52.              transform: rotateY(60deg) translateZ(300px);
  53.          }
  54.  
  55.          section div:nth-child(3) {
  56.              transform: rotateY(120deg) translateZ(300px);
  57.          }
  58.  
  59.          section div:nth-child(4) {
  60.              transform: rotateY(180deg) translateZ(300px);
  61.          }
  62.  
  63.          section div:nth-child(5) {
  64.              transform: rotateY(240deg) translateZ(300px);
  65.          }
  66.  
  67.          section div:nth-child(6) {
  68.              transform: rotateY(300deg) translateZ(300px);
  69.          }
  70.      </style>
  71.  </head>
  72.  
  73.  <body>
  74.      <section>
  75.          <div></div>
  76.          <div></div>
  77.          <div></div>
  78.          <div></div>
  79.          <div></div>
  80.          <div></div>
  81.      </section>
  82.  </body>
  83.  
  84.  </html>

web CSS3 实现3D旋转木马的更多相关文章

  1. CSS3 实现3D旋转木马效果

    基本原理: 1.首先我们需要让图片能旋转的效果,我们让所有图片绝对定位(position:absolute),共用一个中心点. 2.对于舞台我们加一个视距,比如下面的demo是 perspective ...

  2. web CSS3 实现3D动态翻牌效果

    使用纯CSS3 实现翻牌效果  需要注意要给子盒子使用绝对定位,这样两个盒子可以完全重合在一起,需要给父盒子一个 transform-style: preserve-3d;让子盒子翻转时保持3D效果, ...

  3. 网页特效：用CSS3制作3D图片立方体旋转特效

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  4. css3的3D和2D

    css3的3D旋转:rorateX():参数为正值时,盒子是围绕x轴,完成从Y轴正方向到Y轴负方向的旋转,视觉上呈现高度上的变化.rorateY():参数为正值时,盒子是围绕Y轴,完成从X轴正方向到X ...

  5. 使用 CSS3 实现 3D 图片滑块效果【附源码下载】

    使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...

  6. CSS3之3D变换实例详解

    CSS3的3D效果很赞,本文实现简单的两种3D翻转效果.首先看效果和源代码,文末是文绉绉的总结部分^_^ 以下CSS代码为了简洁没有添加前缀,请视情况自行添加(自动化时代推荐使用其他的一些方法,如gu ...

  7. CSS3 transforms 3D翻开

    R T L B   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  8. 使用CSS3实现3D图片滑块效果

    使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...

  9. 一款基于css3的3D图片翻页切换特效

    今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id= ...

随机推荐

  1. @topcoder - SRM614D1L3@ TorusSailing

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个 N*M 的方格图,某人从 (0, 0) 出发想要走到 ...

  2. eval5: TypeScript编写的JavaScript解释器

    eval5是基于TypeScript编写的JavaScript解释器,100%支持ES5语法. 项目地址:https://github.com/bplok20010/eval5 使用场景 浏览器环境中 ...

  3. MongoDB 基础知识学习笔记

    注意:本文假设您已经安装好 MongoDB 数据库并启动它了. 连接 MongoDB.数据库操作.集合操作 连接 MongoDB mongo ip:port/dbName -u username -p ...

  4. numpy.stack和numpy.concatenate的区别

    在使用numpy进行矩阵运算的时候踩到的坑,原因是不能正确区分numpy.concatenate和numpy.stack在功能上的差异. 先说numpy.concatenate,直接看文档: nump ...

  5. 【Java】错误: 需要class, interface或enum

    今天在用cmd实现mvn package操作时跳出来的报错! 网上搜索到的结论是因为编码问题而产生的,具体原因就不深究了 要详细了解可以查看以下链接https://blog.csdn.net/qq_3 ...

  6. Java学习笔记7（IO）

    IO(输入输出) IO流按照操作数据的不同,分为字节流和字符流,按照数据传输方向分为输入流和输出流. 字节流 计算机中,所有文件都是以二进制(字节)形式存在,IO流中针对字节的输入输出提供了一系列的流 ...

  7. tomcat中AJP协议和HTTP协议的区别

    tomcat的server.xml中的AJP和HTTP连接器区别 HTTP协议:连接器监听8080端口,负责建立HTTP连接.在通过浏览器访问Tomcat服务器的Web应用时,使用的就是这个连接器. ...

  8. JavaWeb网上图书商城完整项目-数据库操作工具类

    1.首先安装数据库,在windows上安装和在unix上面安装环境不一样,我在自己的本地电脑上安装,安装成功之后,如果使用navicat远程工具访问,需要允许mysql远程能被访问 方法二.直接授权( ...

  9. 重学ASP.NET Core 中的标记帮助程序

    标记帮助程序是什么 标记帮助程序使服务器端代码可以在 Razor 文件中参与创建和呈现 HTML 元素. 例如,内置的 ImageTagHelper 可以将版本号追加到图片名称.  每当图片发生变化时 ...

  10. dart快速入门教程 （2）

    2.变量和数据类型 2.1.变量和常量 变量通俗的说就是可以变化的量,作用就是用来存储数据,你可以把一个变量看作是一个水果篮,里面可以装苹果.梨.香蕉等,常量就是一个固定的值,和变量是相对的,变量可以 ...