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

简要介绍一下重点

transform: rotateY(60deg) translateZ(300px);
这是必须先旋转后 沿着z轴移动，不然会错乱，translateZ是沿着Z轴移动，其值越大，我们看见的图像就越大。
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <title>Document</title>

     <style>

         body {

             perspective: 1000px;

         }

         section {

             position: relative;

             width: 300px;

             height: 200px;

             margin: 150px auto;

             transform-style: preserve-3d;

             animation: roate 10s linear infinite;

         }

         section div {

             position: absolute;

             top:;

             left:;

             width: 100%;

             height: 100%;

             /* background: url(media/dog.jpg) no-repeat; */

             background-color: yellow;

         }

         section:hover {

             animation-play-state: paused;

         }

         @keyframes roate {

             0% {

                 transform: rotateY(0);

             }

             100% {

                 transform: rotateY(360deg);

             }

         }

         section div:nth-child(1) {

             transform: rotateY(0) translateZ(300px);

             /* 可以添加自己想添加的图片 这里用背景色pink代替 下面都一样*/

             background-color: pink;

         }

         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>

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. 包子凑数(dp 0-1、完全背包)【背包问题】

    包子凑数(蓝桥杯) 感谢:@ Statusrank 题目链接(点击) 题目描述 小明几乎每天早晨都会在一家包子铺吃早餐.他发现这家包子铺有N种蒸笼,其中第i种蒸笼恰好能放Ai个包子.每种蒸笼都有非常多 ...

  2. Deno 初探

    前言 Deno 已经被前端圈子提及有很长一段时间了,上个月 Deno 发布了 1.0 版本,又掀起了一小股 Deno 热.Deno 到底是什么?它可以用来做什么呢?它好用吗?带着一直以来的好奇心,趁着 ...

  3. 开窗函数_ROW_NUMBER() / RANK() / DENSE_RANK() / NTILE() ------4个排名函数训练_1

    排名函数(训练,其实从SQL2005时就已经被引入) /*SQL Server 2012从零开始学_7.8  排序函数*/ --DROP TABLE fruits GO Create table fr ...

  4. postman获得时间戳和md5加密的方法

    注意点:记得用postman.setGlobalVariable设置全局变量,不然{{strmd5}}这种变量取不到值

  5. cb40a_c++_STL_算法_交换swap_ranges

    cb40a_c++_STL_算法_交换swap_rangesswap_ranges(b,e,b2);如果两个容器的数据数量不一致时,只交换一部分数据,a里面3个,b里面5个,则只会交换3个,b里面还有 ...

  6. cb15a_c++_vector容器的自增长_每次增加百分之50

    cb15a_c++_vector容器的自增长_每次增加百分之50每次自动容量代销扩充,增加百分之50_for windows C++,vector是用数组做出来的->数组的缺点和优点优点:具有下 ...

  7. DES 加密解密 文件工具类

    public class DESEncrypt { /** 加密工具 */ private Cipher encryptCipher = null; /** 解密工具 */ private Ciphe ...

  8. <用户输入url按下回车，一直到用户看到界面，这期间经历了什么>

    用户输入url按下回车,一直到用户看到界面,这期间都经历什么? 一.  DNS解析缓存: 1. 找到浏览器缓存解析域名: 2. 找到和 DNS 缓存 ; 3. 找到路由器 DNS 缓存: 4. 找到查 ...

  9. Jedis操作Redis实例

    简介 Jedis Client是Redis官网推荐的一个面向java客户端,库文件实现了对各类API进行封装调用. Jedis源码工程地址:https://github.com/xetorthio/j ...

  10. 【Spring】@Transactional 闲聊

    菜瓜:上次的AOP理论知识看完收获挺多的,虽然有一个自定义注解的demo,但还是觉得差点东西 水稻:我也觉得没有跟一遍源码还是差点意思,这次结合@Transactional注解深入源码看一下 菜瓜:事 ...