html旋转相册,css3 旋转相册
旋转图片.png
直接上代码,相信大家一看就懂
html
css代码
*{
margin: 0;
padding: 0;
}
#wrap{
perspective: 900px; /*在这里开启景深,因为box也需要转动*/
}
.box{
transform-style: preserve-3d;
width: 300px;
height: 200px;
margin: 200px auto;
position: relative;
animation: rotate 10s linear infinite;
/*backface-visibility: hidden;*/ /*开启了,后半圈会看不到,因为隐藏了背面*/
}
img{
width: 300px;
height: 200px;
position: absolute;
left: 0;
top: 0;
}
@keyframes rotate {
from{
/*rotateX(-15deg) 变成一个俯视的视角*/
transform:rotateX(-15deg) rotateY(0deg);
}
to{
transform:rotateX(-15deg) rotateY(360deg);
}
}
js代码
var oImgs = document.querySelectorAll("img");
//sin/cos/tan 里面只能写弧度,故要做转换
var ImgtranslateZ = oImgs[0].offsetWidth / 2 / Math.tan(360/oImgs.length/2 * Math.PI /180);
//这里提醒一点,要先绕Y轴转,再Z轴平移,z轴始终垂直于平面
oImgs.forEach(function (item,index,arr) {
item.style.transform = "rotateY(" +index * 360 / oImgs.length+ "deg)
translateZ("+ ImgtranslateZ +"px)" ;
})
代码打包
旋转相册
*{
margin: 0;
padding: 0;
}
#wrap{
perspective: 900px; /*在这里开启景深,因为box也需要转动*/
}
.box{
transform-style: preserve-3d;
width: 300px;
height: 200px;
margin: 200px auto;
position: relative;
animation: rotate 10s linear infinite;
/*backface-visibility: hidden;*/ /*开启了,后半圈会看不到,因为隐藏了背面*/
}
img{
width: 300px;
height: 200px;
position: absolute;
left: 0;
top: 0;
}
@keyframes rotate {
from{
/*rotateX(-15deg) 变成一个俯视的视角*/
transform:rotateX(-15deg) rotateY(0deg);
}
to{
transform:rotateX(-15deg) rotateY(360deg);
}
}
var oImgs = document.querySelectorAll("img");
//sin/cos/tan 里面只能写弧度,故要做转换
var ImgtranslateZ = oImgs[0].offsetWidth / 2 / Math.tan(360/oImgs.length/2 * Math.PI /180);
//这里提醒一点,要先绕Y轴转,再Z轴平移,z轴始终垂直于平面
oImgs.forEach(function (item,index,arr) {
item.style.transform = "rotateY(" +index * 360 / oImgs.length+ "deg) translateZ("+ ImgtranslateZ +"px)" ;
})
html旋转相册,css3 旋转相册相关推荐
- css同时旋转rotate3d,CSS3 旋转 rotate3d()rotatez()应用实例
在CSS3中,rotate属性用于设置对象(如 div.ul li.文字等)旋转,可设置对象在 X.Y 和 Z轴的旋转角度:只设置X和Y轴的称为2d旋转,X.Y和Z轴同时设置的称为3d旋转:2d旋转在 ...
- 解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果
解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果 一.前言 最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...
- H5 3d立体相册 CSS3特性
CSS3 变形特性,立方相册,3d旋转 之前看见过3d效果的立体相册,挺羡慕的,现在自己也有机会实现属于自己的3d立体相册了~~~话不多说,开搞- 一, 准备材料 六张自己喜欢的图片,六个面,怎么简单 ...
- 可控制转速CSS3旋转风车特效
以前制作网页动画一般使用javascript,现在已经有越来越多动动画使用纯CSS实现,并且动画的控制也可以使用CSS3实现,因为CSS 3来了,CSS 3的动画功能确实强大.以下是一个纯CSS3制作 ...
- 3D旋转(CSS3)
3D旋转(CSS3) <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
- css3缓慢出现,让CSS3旋转开始缓慢然后结束缓慢?
这不是一个可以通过使用ease-in解决的问题.让CSS3旋转开始缓慢然后结束缓慢? 如果我有一个元素,我想在CSS3中旋转一段时间,但是开始慢,结束速度慢,我该怎么做? CSS @-webkit-k ...
- css3魔方3乘3每层旋转_学习做旋转魔方 (css3)
学习做旋转魔方 (css3) 看到一个帖子做了一个旋转魔方, 想着试着学习练练手. 看着高手的代码按照自己的思路, 码了一下, 记下遇到的一些问题. html 代码片段 3D 魔方 Rubik's C ...
- css旋转不围绕圆心,css3:元素总是围绕中心旋转[关闭](css3: element always rotates around center [closed])...
css3:元素总是围绕中心旋转[关闭](css3: element always rotates around center [closed]) 我有这个演示 . 如图所示,元素围绕其中心旋转,但我正 ...
- 炫酷的动画特效—css3旋转立方球体
炫酷的动画特效-css3旋转立方球体 想要实现旋转立方球体特效,以下的内容你不容错过. 要理解的知识点 形成一个3D空间: transform-style:preserve-3d (让父元素形成3D, ...
- css3旋转带放大缩小效果
下载地址 css3旋转带放大缩小效果,鼠标悬停的时候触发放大或缩小并旋转的动画. dd:
最新文章
- java中遍历map的几种方法介绍
- 在text html模版中写js,如何利用模板将HTML从JavaScript中抽离
- IIS调用批处理权限的处理
- linux tomcat下部署多个项目启动失败
- Raider对F#支持的技术细节
- 用hundred造句子_关于冬至的问候短句,冬至文案唯美句子
- android 串口调试工具_树莓派通用串口通信实验
- 【视频教程】使用 ASP.NET Core 3.x 构建 RESTful Web API 已完结
- 华为云服务器实战 之 Gitlab安装与配置使用
- d3 选择元素 api
- android 百叶窗动画,android 幻灯片效果之百叶窗
- cmd命令java出错_Java基础知识_JavaSE_02
- springmvc + excel代
- 新入手了台IBM Thinkpad T60笔记本 重装系统
- 信息加工心理学用计算机的工作原理,第四章 认知学习理论 第七节 信息加工学习理论...
- java取万位的值,Excel中表格数值进行取万位整数的操作方法
- 倍加福光电传感器OBE10M-18GM60-SE5-V1
- poj-3295 Tautology
- JAVA中的二维数组的定义及使用
- linux如何解压.z文件,linux文件解压缩命令(史上最全教程)