案例-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/ ...
随机推荐
- HDU 1029Ignatius and the Princess IV
Ignatius and the Princess IV Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32767 K ( ...
- springboot 项目启动脚本
springboot项目启动可通过下面的shell脚本启动. startup.sh app=order-service-rest.jar appout=logs/${app/.jar/.out} ap ...
- Mac os x安装IDEAL及配置JDK和Maven
此文章是在已安装好IDEAL前提下进行配置jdk和maven的操作文档. 1. 下载并配置JDK及Maven Mac下载并配置JDK方法: 详见Mac安装JDK和JMeter5-安装JDK Mac下载 ...
- Django知识笔记
基本应用 创建项目: django-admin startproject 项目名称 目录结构: manage.py是项目管理文件,通过它管理项目. 与项目同名的目录,此处为test1. _init_. ...
- TextView点击后背景颜色、文字颜色改变（转）
转自:http://blog.csdn.net/u013278940/article/details/51152655 TextView本没有点击效果,故为实现点击后文字颜色改变和背景改变,需要写se ...
- Spring IOC 的理解，初始化过程
在创建ApplicationContext实例对象过程中会创建一个spring容器,该容器会读取配置文件"cn/wuliaokankan/beans.xml",并统一管理由该文件中 ...
- 74th Jupyter Notebook 插入图片的方法
转载: https://account.cnblogs.com/signin?ReturnUrl=http%3A%2F%2Fhome.cnblogs.com%2Fu%2Ferdou%2F 插入本地 ...
- RGBA的值0-255范围如何转换成0-1范围
这样一个rgba(1,0,0,1) 如果我们要把它转换成 0-255范围 就是rgb分别乘以255 就是 rgba(255,0,0,1) 0-255转0-1范围 如 rgba(34,56,56,1)转 ...
- nmap使用笔记
扫描全端口判断服务 nmap ip -T4 -Pn -sV -p 1-65535 扫描端口并且标记可以爆破的服务 nmap ip --script=ftp-brute,imap-brute,smtp- ...
- HTTP详解教程 / HTTP 响应头信息 HTTP 响应头信息
HTTP请求头提供了关于请求,响应或者其他的发送实体的信息. 在本章节中我们将具体来介绍HTTP响应头信息.直线电机哪家好 应答头 说明 Allow 服务器支持哪些请求方法(如GET.POST等). ...