案例-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/ ...
随机推荐
- Nacos-服务注册地址为内网IP的解决办法
最近在使用Spring Cloud Alibaba这一套微服务解决方案,但是在服务注册的时候,网关死活找不到微服务地址,自己的微服务通过网关怎么也访问不到. 查找原因 仔细一查才发现,网关去访问了一个 ...
- 【目录】mysql 架构篇系列
随笔分类 - mysql 架构篇系列 mysql 架构篇系列 4 复制架构一主一从搭建(半同步复制) 摘要: 一.概述 在mysql 5.5之前,mysql 的复制是异步操作,主库和从库的数据之间存在 ...
- 【最新】 ELK之 logstash 同步数据库数据到Elasticsearch
cd /usr/local 下载logstash 6.4.3版本 wget https://artifacts.elastic.co/downloads/logstash/logstash-6.4.3 ...
- go语言从例子开始之Example5.for循环
for 是 Go 中唯一的循环结构.这里有 for 循环的三个基本使用方式. package main import "fmt" func main() { 最常用的方式,带单个循 ...
- window常见操作
cmd查看进程命令 nestat -aon|findstr "端口" 杀进程: taskkill /f /pid 端口号 /f参数强制杀进程 通过注册表删除桌面图标 cmd re ...
- php图片无损压缩的问题解决
代码如下 <?php namespace App\Contract; use Carbon\Carbon; /** * 图片压缩封装类 * @author jackie <2019.11. ...
- JavaSE---main方法解读
1.概述 1.1 java程序入口:main方法 public static void main(String[] args){} a,public:java类由JVM调用,为了让JVM自由调用mai ...
- JUC线程池
原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11443644.html newFixedThreadPool 重用指定数目(nThreads)的线程, ...
- POJ A Plug for UNIX (最大流 建图)
Description You are in charge of setting up the press room for the inaugural meeting of the United N ...
- bind-dns服务器搭建
环境:主服务器上IP为192.168.159.30 安装相关包bind dns服务器 bind-utils提供nslookup dig等命令 yum -y install bind bind-uti ...