案例-3D旋转木马
<!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 需要旋转，所以给body加透视 */
}
@keyframes move {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
section {
position: relative;
width: 300px;
height: 200px;
margin: 100px auto;
transform-style: preserve-3d; /*给子元素添加动画效果*/
animation: move 6s linear infinite;
}
section:hover {
cursor: pointer;
animation-play-state: paused; /*暂停动画*/
}
section div {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
div:nth-child(1) {
background: coral;
transform: translateZ(300px);
}
div:nth-child(2) {
background: cadetblue;
transform: rotateY(60deg) translateZ(300px);
}
div:nth-child(3) {
background: pink;
transform: rotateY(120deg) translateZ(300px);
}
div:nth-child(4) {
background: peru;
transform: rotateY(180deg) translateZ(300px);
}
div:nth-child(5) {
background: plum;
transform: rotateY(240deg) translateZ(300px);
}
div:nth-child(6) {
background: palegreen;
transform: rotateY(300deg) translateZ(300px);
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>
案例-3D旋转木马的更多相关文章
- web CSS3 实现3D旋转木马
3D 旋转木马是CSS中常见的特效之一,旋转木马可以有多种方法实现,这里我使用纯CSS实现这种动画的效果. 简要介绍一下重点 transform: rotateY(60deg) translateZ( ...
- HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相册
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...
- HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相冊
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...
- CSS3 实现3D旋转木马效果
基本原理: 1.首先我们需要让图片能旋转的效果,我们让所有图片绝对定位(position:absolute),共用一个中心点. 2.对于舞台我们加一个视距,比如下面的demo是 perspective ...
- jQuery仿3D旋转木马效果插件(带索引按钮)
项目中需要用到旋转木马效果,但是我在网上找的插件,基本都是不带按钮或者只是带前后按钮的,而项目要求的是带索引按钮,也就是说有3张图片轮播,对应的要有3个小按钮,点击按钮,对应的图片位于中间位置.于是就 ...
- 案例:3D切割轮播图
一.3d转换 3D旋转套路:顺着轴的正方向看,顺时针旋转是负角度,逆时针旋转是正角度 二.代码 <!DOCTYPE html> <html lang="en"&g ...
- 手机端3d旋转木马效果+保存图片到本地
<!DOCTYPE html> <html> <head> <title></title> <meta charset="U ...
- 【CSS3进阶】酷炫的3D旋转透视
之前学习 react+webpack ,偶然路过 webpack 官网 ,看到顶部的 LOGO ,就很感兴趣. 最近觉得自己 CSS3 过于薄弱,想着深入学习一番,遂以这个 LOGO 为切入口,好好研 ...
- 3D旋转特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- elementUI table宽度自适应fit
:fit='true' 或者直接为 fit
- Vue-基础(一)
一.Vue中的常用指令 什么是指令? 指令就是vue中提供的一些对于页面和数据更为方便的操作, 指令就是以数据去驱动DOM行为的,简化DOM的操作 常用指令 v-text / v-html :用于为标 ...
- 关于GeneXus封装方法Model的方法
最近 刚从外地出差回来 工作任务不是很重 能够抽点时间记点东西 下午花了2个多钟头尝试了一下GeneXus的封装方法的功能,这里记一下便于自己以后查看.我们在许多项目中或多或少都会有着重复代码编写的 ...
- 【异常】Caused by: java.lang.IllegalStateException: Method has too many Body parameters
出现此异常原因是引文使用feign客户端的时候,参数没有用注解修饰 1.1GET方式错误写法 @RequestMapping(value="/test", method=Reque ...
- Nginx详细安装部署教程（转）
一.Nginx简介 Nginx是一个web服务器也可以用来做负载均衡及反向代理使用,目前使用最多的就是负载均衡,具体简介我就不介绍了百度一下有很多,下面直接进入安装步骤 二.Nginx安装 1.下载N ...
- JS中的call()和apply()方法(转)
转自:http://uule.iteye.com/blog/1158829 JS中的call()和apply()方法 博客分类: JS 1.方法定义 call方法: 语法:call([thisOb ...
- 六、Redis五种类型 - hash(散列)类型
1.介绍 (1).hash也是一种字典结构,存储了字段(field)和字段值(value)的映射,字段值只能是字符串,不支持其他类型.(2).适合存储对象,对象列表和ID构成键名,字段表示对象的属性, ...
- javax.net.ssl.SSLKeyException: RSA premaster secret error
环境jdk1.7, 调用第三方接口时,出现javax.net.ssl.SSLKeyException: RSA premaster secret error错误,解决方案,将jre/lib/ext所有 ...
- XML 和 HTML 之间的差异
XML 和 HTML 为不同的目的而设计: XML 被设计用来传输和存储数据,其焦点是数据的内容. HTML 被设计用来显示数据,其焦点是数据的外观. HTML 旨在显示信息,而 XML 旨在存储和传 ...
- 【Flutter学习】事件处理与通知之通知（Notification）
一,概述 Notification是Flutter中一个重要的机制,在Widget树中,每一个节点都可以分发通知,通知会沿着当前节点(context)向上传递,所有父节点都可以通过Notificati ...