案例-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/ ...
随机推荐
- windows修改docker的默认存放位置
docker默认存储到c盘,我需要移动到其他盘. 参考了网上很多资料,结果要么移动不了,要么重启docker就回到c盘了. 最后参考docker的官方论坛,找到了解决方案.https://forums ...
- openface人脸识别框架
openface的githup文档地址:http://cmusatyalab.github.io/openface/ openface的安装: 官方推荐用docker来安装openface,这样方便快 ...
- 如何从零搭建一个webpack+react+redux+react-redux的开发环境一入门
阅读本文章的时候,你要有一定的基础知识储备,简单的es6知识,模块化思想知识,js基础知识,node基础知识,react等 首先执行npm init,此时我的文件叫case; 下面安装一些需要的npm ...
- linux上传与下载文件命令
//文件从Linux系统上传到其他系统. sz空格+文件名 //文件从其他系统下载到Linux系统. rz //之后会弹出路径选择框,选择文件,即可下载到当前路径.
- centos7下的Firewalld
一.介绍 防火墙守护 firewalld 服务引入了一个信任级别的概念来管理与之相关联的连接与接口.它支持 ipv4 与 ipv6,并支持网桥,采用 firewall-cmd (command) 或 ...
- EBCDIC 1025 俄语
https://en.wikipedia.org/wiki/EBCDIC_1025 EBCDIC 1025 _0 _1 _2 _3 _4 _5 _6 _7 _8 _9 _A _B _C _D _E ...
- Vue-cli的安装步骤详细版本
https://github.com/vuejs/vue-cli 官网 使用官方推荐的webpack 条件:node在4.以上,npm在3以上 安装步骤:1.cmd打开命令行窗口2.输入cnpm in ...
- 当input中的内容改变时触发的事件
当input中的内容改变时触发的事件 1 $('#id').bind('input propertychange', function() { //处理内容 } 循环js事件 $(document). ...
- oracle创建用户ORA-01045:user lacks CREATE SESSION privilege;
conn internal/oracle grant user aaaa identified by aaaa; conn aaaa/aaaa 会报错: SQL>conn aaaa/aaaa 会 ...
- 【Flutter学习】组件通信(父子、兄弟）
一,概述 flutter一个重要的特性就是组件化.组件分为两种状态,一种是StatefulWidget有状态组件,一种是StatelessWidget无状态组件. 无状态组件不能更新状态,有状态组件具 ...