简单的3d变换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 500px;
height: 300px;
margin: 100px auto 0;
overflow: hidden;
}
.box img{
float: left;
}
#and{
perspective:600;
transform-style: preserve-3d;
/*动画名称 动画时间 速度曲线(liner,ease,ease-in.ease-out,ease-in-out) 动画前延迟 动画播放次数(n|infinite) */
animation: animation-x 7s linear 0s infinite;
}
.i3d,.l3d{
transform-style: preserve-3d;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes animation-x{
0%{transform: rotateX(0deg);}
50%{transform: rotateX(180deg);}
100%{transform: rotateX(360deg);}
}
#animate1{
animation: animation-y 5s linear 0s infinite;
}
#animate3{
animation: animation-y 3s linear 0s infinite;
}
@keyframes animation-y{
0%{transform: rotateY(0deg);}
50%{transform: rotateY(180deg);}
100%{transform: rotateY(360deg);}
}
#animate2{
animation: animation-second 4s linear 0s infinite;
}
@keyframes animation-second{
0%{transform: rotateY(360deg);}
50%{transform: rrotateY(180deg);}
100%{transform: rotateY(0deg);}
}
</style>
</head>
<body>
<div id="and" class="box">
<div id="animate1" class="l3d">
<img class="i3d" src="data:image/ps1.jpg" />
<img class="i3d" src="data:image/ps2.jpg" />
<img class="i3d" src="data:image/ps3.jpg" />
<img class="i3d" src="data:image/ps4.jpg" />
<img class="i3d" src="data:image/ps5.jpg" />
</div>
<div id="animate2" class="l3d">
<img class="i3d" src="data:image/ps6.jpg" />
<img class="i3d" src="data:image/ps7.jpg" />
<img class="i3d" src="data:image/ps8.jpg" />
<img class="i3d" src="data:image/ps9.jpg" />
<img class="i3d" src="data:image/ps10.jpg" />
</div>
<div id="animate3" class="l3d">
<img class="i3d" src="data:image/ps11.jpg" />
<img class="i3d" src="data:image/ps12.jpg" />
<img class="i3d" src="data:image/ps13.jpg" />
<img class="i3d" src="data:image/ps14.jpg" />
<img class="i3d" src="data:image/ps15.jpg" />
</div>
</div>
</body>
</html>
简单的3d变换的更多相关文章
- CSS3之3D变换实例详解
CSS3的3D效果很赞,本文实现简单的两种3D翻转效果.首先看效果和源代码,文末是文绉绉的总结部分^_^ 以下CSS代码为了简洁没有添加前缀,请视情况自行添加(自动化时代推荐使用其他的一些方法,如gu ...
- [OpenGL ES 03]3D变换:模型,视图,投影与Viewport
[OpenGL ES 03]3D变换:模型,视图,投影与Viewport 罗朝辉 (http://blog.csdn.net/kesalin) 本文遵循“署名-非商业用途-保持一致”创作公用协议 系列 ...
- WPF 3D 小小小小引擎 - ·WPF 3D变换应用
原文:WPF 3D 小小小小引擎 - ·WPF 3D变换应用 WPF可以提供的3D模型使我们可以轻松地创建3D实体,虽然目前来看还很有一些性能上的问题,不过对于一些简单的3D应用应该是可取的,毕竟其开 ...
- WPF中的3D变换PlaneProjection
在UWP中有一个比较好用的伪3D变换PlaneProjection,可以以一种轻量级和非常简单的方式实现3D的效果.这种效果在Silverlight中也有这种变换,但在WPF中确一直没有提供. 虽然W ...
- Windows UWP开发系列 – 3D变换
在Win8.1中,引入了一个PlaneProjection可以实现3D变换,但它的变换方式比较简单,只能实现基本的旋转操作.在Windows 10 UWP中,引入了一个更加强大的3D变换Transfo ...
- 基本3D变换之World Transform, View Transform and Projection Transform
作者:i_dovelemon 来源:CSDN 日期:2014 / 9 / 28 主题:World Transform, View Transform , Projection Transform 引言 ...
- WPF 3D变换应用
WPF可以提供的3D模型使我们可以轻松地创建3D实体,虽然目前来看还很有一些性能上的问题,不过对于一些简单的3D应用应该是可取的,毕竟其开发效率高,而且也容易上手. 下面给大家演示的是使用在WPF 3 ...
- IT兄弟连 HTML5教程 CSS3属性特效 3D变换1
3D变换较2D变换多了一下的转换属性,3D转换属性及描述如表1: 表1 3D转换属性 3D的转换方法如表2: 表2 3D转换方法 1 transform-style transform- ...
- CSS3之3d变换与关键帧
3d变换是在transform基础上实现的 transform-style:preserve-3d; 建立3d空间 perspective:; 景深(设置用户看的距离) perspective-ori ...
随机推荐
- usb的hid鼠标键盘报告描述符(五)
title: usb的hid鼠标键盘报告描述符 tags: linux date: 2018/12/20/ 18:05:08 toc: true --- usb的hid鼠标键盘报告描述符 https: ...
- 【SVN】svn 查看项目的 svn 服务器地址目录(脱机状态下)
#事故现场: 在无法连接到svn服务器地址的情况下,查看本地项目的svn的服务器地址目录: #事故分析 因为无法连接svn服务器,所以只能通过svn在本地存储的信息来获取svn的地址路径信息: #解决 ...
- MessagePack for C#
MessagePack for C# 快速序列化组件MessagePack介绍 简介 MessagePack for C#(MessagePack-CSharp)是用于C#的极速MessagePa ...
- mui扩展字体在哪里下载
一次在一个知名前端模板网站上用积分下载了一个手机网页模板,没想到作者竟然玩起了删减隐藏,故意挖坑. 查看其原因是少一个mui.ttf的文件,纵然其他的文件及名称都有删改但无关紧要.也就是好多人搜索的m ...
- Celery - 一个懂得 异步任务 , 定时任务 , 周期任务 的芹菜
1.什么是Celery?Celery 是芹菜Celery 是基于Python实现的模块, 用于执行异步定时周期任务的其结构的组成是由 1.用户任务 app 2.管道 broker 用于存储 ...
- python 模块 DButils
# DButils 为了解决多客户端都需要操作数据库的问题. # import pymysql # from DBUtils.PooledDB import PooledDB # # POOL = P ...
- spring事务源码分析结合mybatis源码(三)
下面将结合mybatis源码来分析下,这种持久化框架是如何对connection使用,来达到spring事务的控制. 想要在把mybatis跟spring整合都需要这样一个jar包:mybatis-s ...
- 通过go-ethereum源码看如何管理项目
今天抽空看了下go-ethereum项目的源码 ( https://github.com/ethereum/go-ethereum ),其中 ethereum 是github下的一个帐号.go-eth ...
- webstorm允许移动端访问本地html页面的方法
- Beta 冲刺(4/7)
目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:beta冲刺(4/7) 团队部分 后敬甲(组长) 过去两天完成了哪些任务 整理博客 ppt模板 接下来的计划 做好机动. ...