实现图片360度 旋转

最新推荐文章于 2021-12-26 10:24:28 发布
最新推荐文章于 2021-12-26 10:24:28 发布
阅读量2k 收藏 2
点赞数
文章标签： javascript 移动开发 测试 ViewUI
原文链接：http://www.cnblogs.com/JunLoveHua/p/10191257.html
版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>img_3D</title>
</head>
<style type="text/css">
@keyframes an1{
0%{
transform: rotateY(0deg) ;
}
50%{
transform: rotateY(180deg) ;
}
100%{
transform: rotateY(360deg) ;
}
}
.container{
width: 900px;
height: 400px;
background: rgba(255,0,0,0.5);
/*opacity: 0.3;*/

margin: 200px auto;
perspective: 2000px;
transform-style: preserve-3d;
animation: an1 10s linear 0s infinite;
}
.container img{
width: 200px;
height: auto;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
}
.container img:nth-child(1){
transform: rotateY(0deg) translateZ(350px);
}
.container img:nth-child(2){
transform: rotateY(36deg) translateZ(350px);
}
.container img:nth-child(3){
transform: rotateY(72deg) translateZ(350px);
}
.container img:nth-child(4){
transform: rotateY(108deg) translateZ(350px);
}
.container img:nth-child(5){
transform: rotateY(144deg) translateZ(350px);
}
.container img:nth-child(6){
transform: rotateY(180deg) translateZ(350px);
}
.container img:nth-child(7){
transform: rotateY(216deg) translateZ(350px);
}
.container img:nth-child(8){
transform: rotateY(252deg) translateZ(350px);
}
.container img:nth-child(9){
transform: rotateY(288deg) translateZ(350px);
}
.container img:nth-child(10){
transform: rotateY(324deg) translateZ(350px);
}
</style>
<body>
<div class="container">
<img src="view/I.jpg">
<img src="view/L.jpg">
<img src="view/O.jpg">
<img src="view/V.jpg">
<img src="view/E.jpg">
<img src="view/Y.jpg">
<img src="view/O%20(2).jpg">
<img src="view/U.jpg">
<img src="view/Dong.jpg">
<img src="view/Yang.jpg">
</div>
</body>
</html>

转载于:https://www.cnblogs.com/JunLoveHua/p/10191257.html

weixin_30501857
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
图片360°旋转
04-27
图片左右360°旋转 基于jquery-1.11.1.min.js
Qt360度旋转图片
06-20
使用Qt开发一个可以将一张圆形图片旋转360度的效果，很酷，加上背景音乐
图片360度无死角自由旋转
qq_56175754的博客
04-19 1320
前言   图片360度任意旋转,   一、设计思路 1.确定中心和起始点：当鼠标点击旋转图标时，中心点为左边图片中心，起始点为旋转图标中心； 2.确定结束点：当鼠标移动时，鼠标的每一次变换都会更新结束点的坐标； 3.通过坐标点计算出该三角形三条边的长度(勾股定理)，再通过余弦函数算出弧度制，反余弦函数将弧度 制转换为角度制(思路详解中会详细介绍)； 4.ie下通过滤镜，其它浏览器通过rotate实现最终效果；   二、思路详解 1.获取角度的方法(其余步骤过于简单不在赘
360度旋转轮播图
01-18
立体式轮播图 可自行修改样式大小等
基于jquery Circlr 360度3D旋转插件
05-19
内包含源码案例以及完整图片资源。Circlr插件是一款基于jQuery的可以对图片进行360度全方位旋转展示的插件。
js实现图片360度旋转
10-20
本文主要介绍了js实现图片360度旋转的思路与方法。具有很好的参考价值，下面跟着小编一起来看下吧
实现图片360度球型3D旋转
11-09
实现图片360度球型3D旋转 [注意：本资源来自网络，如有侵权，请联系我删除，谢谢。]
利用C#代码实现图片旋转360度
01-20
using System; using System.Collections.Generic; using System.Drawing; using System.IO; using System.Linq; using System.Text;...namespace 图片旋转程序 ... /// 以逆时针为方向对图像进行... /// 旋转角度[0,360](前
HTML实现图片360度循环旋转
热门推荐
雨田哥的博客
05-09 3万+
HTML实现图片360度循环旋转效果图//css代码 .header{ -webkit-animation:rotateImg 1s linear infinite; width: 80px ; height: 80px; border: 1px solid #ccc; vertical-align: middle; }@keyframes rotateImg
html让图片自动旋转360,html5人物图片360度立体旋转
weixin_34581086的博客
05-31 535
Full 360 degree View - HoverTree.hvtholder {margin: 0px auto;width: 789px;text-align: center;}a {color: blue;}var ctx = null; // global variable 2d contextvar frame = 1; // 23var width = 0;var height ...
产品360度旋转展示，非常好用，加载多张图片
11-10
非常好用，加载多张图片,产品360度旋转展示，非常好用，加载多张图片
css3图片旋转鼠标悬停图片360度旋转效果代码
11-17
css3图片旋转鼠标悬停图片360度旋转效果代码 css3图片旋转鼠标悬停图片360度旋转效果代码 css3图片旋转鼠标悬停图片360度旋转效果代码
CSS——正方体360°旋转动画 效果
NanChen的博客
12-26 1764
对3D图形做动画效果
transform: rotateY(360deg)； 导致页面元素闪烁
blog
04-26 2461
项目场景： 动画过渡效果开发，需要根据实际状态让页面上的某个元素发生过渡效果。 问题描述： 需要过渡的元素正常执行过渡，但是在他过渡的时候会让在他层级（z-index）上的元素发生闪烁。bug出现在iPhone移动设备上，Win10和Android移动设备可以正常显示。 原因分析： 这里涉及了一个概念：层叠上下文，给元素设置transform属性会创建一个新的stacking context，导致z-index的层级不同，从而出现闪烁问题。 解决方案： 方法 一 添加 transform: tra
html旋转360度特效,CSS3图片旋转特效(360/60/-360度)?
weixin_30095343的博客
06-04 802
CSS3让图片旋转360度、60度、-360度等，大家可以举一反三，下面由这几个度数的示例代码，喜欢的朋友可以参考下由于没法展示效果只是截了个图下面是实现代码：复制代码 代码如下:p#socialicons img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */-moz-transition: all 0.8s e...
CSS3的rotate与rotateX的顺序研究
zeromike
07-27 1495
转自：http://www.w3cfuns.com/article-5595079-1-1.html 文章真正出处：http://www.alloyteam.com/2012/11/the-order-of-roate-with-rotatex-problem/ 这篇是文章是转自腾讯的前端团队的，我本想直接转那篇，可是腾讯的这篇，有两个图显示不出来，难道是我打开的不对？       我起初...
360°旋转图片
一入前端深似海
09-11 1585
今天实现一个触摸屏，可以360°来回滑动的图片效果放在vue项目里面！ 网上有很多方法，这里采用其中之一，希望对你有帮助~ 按步骤引入： 在index.html 引入 jq 和一个封装好的js。 封装好的js如下 (function (global, factory) { typeof exports === 'object' && typeof module !== 'u...
css3循环360度图片旋转
boy火巨的博客
03-21 6599
上个效果图 首先这是一张静态的 png图片 是通过添加 CSS 样式让图片旋转起来的，不是GIF动态图！ 代码如下： css： .noDataImg{ -webkit-transform: rotate(360deg); animation: rotation 3s linear infinite; -moz-animation: rotation 3s ...
HTMl图片旋转
m0_51700376的博客
12-23 1259
效果图： 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片旋转</title> <style type="text/css"> .a1{ animation: aa1 4s linear infinite; } @keyframes aa1{ from {transform: rotate(0deg);} to {transform:
canvas在舞台上点击后图片旋转_Canvas实现图片360度旋转
最新发布
05-24
实现图片360度旋转可以使用canvas的`transform`方法，通过设置旋转角度来实现。具体实现可以按照以下步骤进行： 1. 获取用户点击的坐标，通过`event.clientX`和`event.clientY`获取相对于浏览器窗口的坐标，再减去...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值