案例-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/ ...
随机推荐
- vue - blog开发学7
将基本的项目部署到linux上(前后台只是实现了基本的功能,本次只是记录一些基本的开发流程,完善,等后续) 1.linux环境准备(我用的是阿里云服务器) ①jre.mysql,Nginx基本上这些就 ...
- 常用Message Queue对比
目前业界有很多MQ产品,我们作如下对比: RabbitMQ 是使用Erlang编写的一个开源的消息队列,本身支持很多的协议:AMQP,XMPP, SMTP, STOMP,也正是如此,使的它变的非常重量 ...
- LLppdd likes strings
LLppdd's likes strings! Time Limit: 1 s Memory Limit: 256 MB 题目背景 LLppdd 由于实在是太弱了,在 \(ION 2018\) 模拟十 ...
- webpack从入门到精通（一）
1.webpack的使用背景: 目前国内前端开发都是基于模块化的 2.webpack的作用有哪些: 3.webpack四大核心理念: entry,output,loaders,plugins 4.使用 ...
- 灵活轻便的Table控件，适合复杂样式的内容排版
github仓库地址 https://github.com/gaoyangclub/GYTableViewController 前言 TableView是在项目开发的时候经常用到的组件,几乎百分之八十 ...
- 如何判断一个List集合中是否有空值
list.Any(v => string.IsNullOrWhiteSpace(v))
- 2018-5-26-Latex-去掉行号
title author date CreateTime categories Latex 去掉行号 lindexi 2018-05-26 10:32:25 +0800 2018-2-13 17:23 ...
- awk 起始位置和长度和 mf 一致
1位开始 , 925开始 截取24 awk '{OFS="";print(substr($0,925,24),substr($0,1,24),substr($0,436,1),&q ...
- 三步完成Source Insight 4.0 破解安装（转）
转自:https://blog.csdn.net/biubiuibiu/article/details/78044232 三步完成Source Insight 4.0 破解安装 下载地址有更新,之 ...
- webpack第一节(1)
跟着慕课网的老师做了下笔记 webpack是一个前端打包工具 它可以优化网页.例如 页面模块化加载.图片优化.css.js压缩等等. 模块化加载也就是懒加载,按需加载,以前的模式是所以得css写在一起 ...