利用perspective 和 transform 里面的几个参数来实现旋转照片墙
2024-05-08 15:12:47
利用perspective 和 transform 里面的几个参数来实现旋转照片墙
旋转照片墙
首先，来看下，是什么效果吧，上效果图 ↓
其实这个东西，很容易制作，先说下思路， 把照片都给叠在一起，然后 rotateY 旋转，给每张图片 旋转不一样的角度能构成一圈， 然后translateZ 出去就好了，最后一步，父级转起来。
搭建好基本的 html 和 css ↓ 已经写好注释啦。
<!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>*{padding: 0;margin: 0;}:root,body{ /* root在html也就是文档，文档是有高度的，而body 是没有高度的，所以继承下来，给 body的子元素使用*/height: 100%;}.wra{position: absolute; /* 把父级作为容器，定位到屏幕的中间去 */width: 200px;height: 100px;left: calc(50% - 100px);top: calc(50% - 50px);}.img{position: absolute; /*设置定位属性，然后所与的图片就会 叠在一起。*/width: 200px;height: 100px;}.img:nth-of-type(1){background-image: url('./img/rotatePic/u=1036157886,1414018506&fm=26&gp=0.jpg');background-size: cover; /*这个参数，是为了更好的显示完整的图片，既是他有可能显示不全。*/}.img:nth-of-type(2){background-image: url('./img/rotatePic/u=1252635897,4048351284&fm=26&gp=0.jpg');background-size: cover;}.img:nth-of-type(3){background-image: url('./img/rotatePic/u=1369094069,1969348532&fm=26&gp=0.jpg');background-size: cover;}.img:nth-of-type(4){background-image: url('./img/rotatePic/u=1891680577,1135327170&fm=26&gp=0.jpg');background-size: cover;}.img:nth-of-type(5){background-image: url('./img/rotatePic/u=215760299,4224999617&fm=26&gp=0.jpg');background-size: cover;}.img:nth-of-type(6){background-image: url('./img/rotatePic/u=4188003421,389717180&fm=26&gp=0.jpg');background-size: cover;}.img:nth-of-type(7){background-image: url('./img/rotatePic/下载 (1).jfif');background-size: cover;}.img:nth-of-type(8){background-image: url('./img/rotatePic/下载 (2).jfif');background-size: cover;}</style>
</head>
<body><div class="wra"><div class="img"></div><div class="img"></div><div class="img"></div><div class="img"></div><div class="img"></div><div class="img"></div><div class="img"></div><div class="img"></div></div>
</body>
</html>
效果如下：
基本架子搭建好后，给每张图片，旋转不同的位置。
<!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>*{padding: 0;margin: 0;}:root,body{ height: 100%;}.wra{position: absolute; width: 200px;height: 100px;left: calc(50% - 100px);top: calc(50% - 50px);}.img{position: absolute; width: 200px;height: 100px;}.img:nth-of-type(1){background-image: url('./img/rotatePic/u=1036157886,1414018506&fm=26&gp=0.jpg');background-size: cover; /*第一张图片，就不用旋转了，让他在原位置就好。*/}.img:nth-of-type(2){background-image: url('./img/rotatePic/u=1252635897,4048351284&fm=26&gp=0.jpg');background-size: cover;transform: rotateY(45deg);}.img:nth-of-type(3){background-image: url('./img/rotatePic/u=1369094069,1969348532&fm=26&gp=0.jpg');background-size: cover;transform: rotateY(90deg);}.img:nth-of-type(4){background-image: url('./img/rotatePic/u=1891680577,1135327170&fm=26&gp=0.jpg');background-size: cover;transform: rotateY(135deg);}.img:nth-of-type(5){background-image: url('./img/rotatePic/u=215760299,4224999617&fm=26&gp=0.jpg');background-size: cover;transform: rotateY(180deg);}.img:nth-of-type(6){background-image: url('./img/rotatePic/u=4188003421,389717180&fm=26&gp=0.jpg');background-size: cover;transform: rotateY(225deg);}.img:nth-of-type(7){background-image: url('./img/rotatePic/下载 (1).jfif');background-size: cover;transform: rotateY(270deg);}.img:nth-of-type(8){background-image: url('./img/rotatePic/下载 (2).jfif');background-size: cover;transform: rotateY(315deg);}</style>
</head>
<body><div class="wra"><div class="img"></div><div class="img"></div><div class="img"></div><div class="img"></div><div class="img"></div><div class="img"></div><div class="img"></div><div class="img"></div></div>
</body>
</html>
旋转好位置后，添加 translateZ() 参数，分开图片。因为，translateZ 也是 transform 的参数之一，所以要添加在rotate后面接上。最后，记得在15行添加上 perspective 属性。不懂什么是 perspective 属性的话，请点击→ css3系列之详解perspective
1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <meta http-equiv="X-UA-Compatible" content="ie=edge">7 <title>Document</title>8 <style>9 *{
10 padding: 0;
11 margin: 0;
12 }
13 :root,body{
14 height: 100%;
15 perspective: 1000px;
16 }
17 .wra{
18 position: absolute;
19 width: 200px;
20 height: 100px;
21 left: calc(50% - 100px);
22 top: calc(50% - 50px);
23 transform-style: preserve-3d; /*这个属性的作用呢，是为了让浏览器，以3d的方式来渲染，
24 这个属性要添在父级身上，那么他的子元素，就能以3d的方式展示。
25 浏览器默认的渲染方式是2d的，我们这种3d结构，他显示不出来。 */
26 }
27 .img{
28 position: absolute;
29 width: 200px;
30 height: 100px;
31 }
32 .img:nth-of-type(1){
33 background-image: url('./img/rotatePic/u=1036157886,1414018506&fm=26&gp=0.jpg');
34 background-size: cover;
35 transform: translateZ(350px);
36 }
37 .img:nth-of-type(2){
38 background-image: url('./img/rotatePic/u=1252635897,4048351284&fm=26&gp=0.jpg');
39 background-size: cover;
40 transform: rotateY(45deg) translateZ(350px);
41 }
42 .img:nth-of-type(3){
43 background-image: url('./img/rotatePic/u=1369094069,1969348532&fm=26&gp=0.jpg');
44 background-size: cover;
45 transform: rotateY(90deg) translateZ(350px);
46 }
47 .img:nth-of-type(4){
48 background-image: url('./img/rotatePic/u=1891680577,1135327170&fm=26&gp=0.jpg');
49 background-size: cover;
50 transform: rotateY(135deg) translateZ(350px);
51 }
52 .img:nth-of-type(5){
53 background-image: url('./img/rotatePic/u=215760299,4224999617&fm=26&gp=0.jpg');
54 background-size: cover;
55 transform: rotateY(180deg) translateZ(350px);
56 }
57 .img:nth-of-type(6){
58 background-image: url('./img/rotatePic/u=4188003421,389717180&fm=26&gp=0.jpg');
59 background-size: cover;
60 transform: rotateY(225deg) translateZ(350px);
61 }
62 .img:nth-of-type(7){
63 background-image: url('./img/rotatePic/下载 (1).jfif');
64 background-size: cover;
65 transform: rotateY(270deg) translateZ(350px);
66 }
67 .img:nth-of-type(8){
68 background-image: url('./img/rotatePic/下载 (2).jfif');
69 background-size: cover;
70 transform: rotateY(315deg) translateZ(350px);
71 }
72 </style>
73 </head>
74 <body>
75 <div class="wra">
76 <div class="img"></div>
77 <div class="img"></div>
78 <div class="img"></div>
79 <div class="img"></div>
80 <div class="img"></div>
81 <div class="img"></div>
82 <div class="img"></div>
83 <div class="img"></div>
84 </div>
85 </body>
86 </html>
然后你就能看见这种效果啦。
然后，我们给父级 加上旋转的功能就OK了。
<!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>*{padding: 0;margin: 0;}:root,body{ height: 100%;perspective: 1000px;}@keyframes run{ /*这里我们要他旋转360度，那么就不用那么麻烦写关键帧了。开始0 结束360，然后循环即可*/0%{transform: rotateY(0deg);}100%{transform: rotateY(360deg);}}.wra{position: absolute; width: 200px;height: 100px;left: calc(50% - 100px);top: calc(50% - 50px);transform-style: preserve-3d;animation: run 20s linear infinite; /*animation linear是匀速运动，infinite是无限循环*/}.img{position: absolute; width: 200px;height: 100px;}.img:nth-of-type(1){background-image: url('./img/rotatePic/u=1036157886,1414018506&fm=26&gp=0.jpg');background-size: cover; transform: translateZ(350px);}.img:nth-of-type(2){background-image: url('./img/rotatePic/u=1252635897,4048351284&fm=26&gp=0.jpg');background-size: cover;transform: rotateY(45deg) translateZ(350px);}.img:nth-of-type(3){background-image: url('./img/rotatePic/u=1369094069,1969348532&fm=26&gp=0.jpg');background-size: cover;transform: rotateY(90deg) translateZ(350px);}.img:nth-of-type(4){background-image: url('./img/rotatePic/u=1891680577,1135327170&fm=26&gp=0.jpg');background-size: cover;transform: rotateY(135deg) translateZ(350px);}.img:nth-of-type(5){background-image: url('./img/rotatePic/u=215760299,4224999617&fm=26&gp=0.jpg');background-size: cover;transform: rotateY(180deg) translateZ(350px);}.img:nth-of-type(6){background-image: url('./img/rotatePic/u=4188003421,389717180&fm=26&gp=0.jpg');background-size: cover;transform: rotateY(225deg) translateZ(350px);}.img:nth-of-type(7){background-image: url('./img/rotatePic/下载 (1).jfif');background-size: cover;transform: rotateY(270deg) translateZ(350px);}.img:nth-of-type(8){background-image: url('./img/rotatePic/下载 (2).jfif');background-size: cover;transform: rotateY(315deg) translateZ(350px);}</style>
</head>
<body><div class="wra"><div class="img"></div><div class="img"></div><div class="img"></div><div class="img"></div><div class="img"></div><div class="img"></div><div class="img"></div><div class="img"></div></div>
</body>
</html>
最后，再加上一个小功能。像你想看哪里，鼠标就移动到 那里 即可，代码在93行开始。
1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <meta http-equiv="X-UA-Compatible" content="ie=edge">7 <title>Document</title>8 <style>9 *{
10 padding: 0;
11 margin: 0;
12 }
13 :root,body{
14 height: 100%;
15 perspective: 1000px;
16 }
17 @keyframes run{
18 0%{
19 transform: rotateY(0deg);
20 }
21 100%{
22 transform: rotateY(360deg);
23 }
24 }
25 .wra{
26 position: absolute;
27 width: 200px;
28 height: 100px;
29 left: calc(50% - 100px);
30 top: calc(50% - 50px);
31 transform-style: preserve-3d;
32 animation: run 20s linear infinite;
33 }
34 .img{
35 position: absolute;
36 width: 200px;
37 height: 100px;
38 }
39 .img:nth-of-type(1){
40 background-image: url('./img/rotatePic/u=1036157886,1414018506&fm=26&gp=0.jpg');
41 background-size: cover;
42 transform: translateZ(350px);
43 }
44 .img:nth-of-type(2){
45 background-image: url('./img/rotatePic/u=1252635897,4048351284&fm=26&gp=0.jpg');
46 background-size: cover;
47 transform: rotateY(45deg) translateZ(350px);
48 }
49 .img:nth-of-type(3){
50 background-image: url('./img/rotatePic/u=1369094069,1969348532&fm=26&gp=0.jpg');
51 background-size: cover;
52 transform: rotateY(90deg) translateZ(350px);
53 }
54 .img:nth-of-type(4){
55 background-image: url('./img/rotatePic/u=1891680577,1135327170&fm=26&gp=0.jpg');
56 background-size: cover;
57 transform: rotateY(135deg) translateZ(350px);
58 }
59 .img:nth-of-type(5){
60 background-image: url('./img/rotatePic/u=215760299,4224999617&fm=26&gp=0.jpg');
61 background-size: cover;
62 transform: rotateY(180deg) translateZ(350px);
63 }
64 .img:nth-of-type(6){
65 background-image: url('./img/rotatePic/u=4188003421,389717180&fm=26&gp=0.jpg');
66 background-size: cover;
67 transform: rotateY(225deg) translateZ(350px);
68 }
69 .img:nth-of-type(7){
70 background-image: url('./img/rotatePic/下载 (1).jfif');
71 background-size: cover;
72 transform: rotateY(270deg) translateZ(350px);
73 }
74 .img:nth-of-type(8){
75 background-image: url('./img/rotatePic/下载 (2).jfif');
76 background-size: cover;
77 transform: rotateY(315deg) translateZ(350px);
78 }
79 </style>
80 </head>
81 <body>
82 <div class="wra">
83 <div class="img"></div>
84 <div class="img"></div>
85 <div class="img"></div>
86 <div class="img"></div>
87 <div class="img"></div>
88 <div class="img"></div>
89 <div class="img"></div>
90 <div class="img"></div>
91 </div>
92 <script>
93 document.body.onmousemove = function(e){
94 this.style.perspectiveOrigin = e.pageX + 'px ' + e.pageY +'px';
95 }
96 </script>
97 </body>
98 </html>
看一下效果好吧。
转载地址：https://www.cnblogs.com/yanggeng/p/11291755.html
利用perspective 和 transform 里面的几个参数来实现旋转照片墙相关推荐
- 《机器人构建实战》——2.2 利用舵机专用测试软件测试舵机及进行参数设置...
本节书摘来异步社区<机器人构建实战>一书中的第2章,第2.2节,作者:丘柳东 ,王牛 ,李瑞峰 ,陈阳,更多章节内容可以访问云栖社区"异步社区"公众号查看. 2.2 利 ...
- 用CSS的perspective和transform将图片扭曲成类似PS的透视效果
最终达到以下透视效果: 个人感想:这种效果在PS中用变形扭曲很快就实现,然而在CSS中做这个效果很麻烦,需要不断地微调.其实是可以有[简单粗暴]的方法,那就是直接在CSS中直接定位四点的坐标,当然CS ...
- 在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理...
CSS3中的变形处理(transform)属 transform的功能分类 1.旋转 transform:rotate(45deg); 该语句使div元素顺时针旋转45度.deg是CSS 3的&quo ...
- html5实现3d翻页效果,利用css3 3d transform制作超逼真翻书效果
本教程给大家带来一个非常有创意的翻书效果,使用的是css 3D transforms属性和css transitions属性.这里将给你展示两种不同的图书设计:精装书和平装书.这两种设计只需要简单的改 ...
- tensorflows十五 再探Momentum和Nesterov's accelerated gradient descent 利用自动控制PID概念引入误差微分控制超参数改进NAGD，速度快波动小
神经网络BP-GD算法和自动控制PID算法有类似之处,都是利用误差反馈对问题进行求解,不同的是自动控制调节的是系统的输入,神经网络调节的是系统本身.本文将引入误差微分控制超参数kd_damp对NAGD ...
- linux利用位置参数数组,Shell编程1_变量、参数和数组
目录 一.从变量开始 1.环境变量 export命令 2.系统自带的环境变量 3.变量的定义和赋值 二.使用参数 参数的获取 三.数组的基本使用 1.数组的定义 2.数组的删除 3.数组的切片和替换 ...
- Mysql中循环拼接参数_利用循环向数据库中插入数据，参数重复的问题
又看了些资料,发现对于说参数存在的问题可以把SqlCommand的创建放到For循环里,可以只连一次数据库,但是效率还是没提高.效率的问题不在于对数据库的开关,而是还是逐条地插入数据.而且数据库连接有 ...
- 利用python自动完成网页计算TEC等参数
之前的博客中推荐了几个在线计算TEC等参数的网站,很方便,但是每次计算还需要手动一个一个在网页上输入信息,稍有一些麻烦,因此博主利用Python实现了一个在本地输入信息,Python自动填充到网页并打 ...
- 利用python进行纸质文档识别（一）图像旋转矫正
前言 这学期我们上了一门软件工程课和数字图像处理课,软件工程课课设要求大家设计一款软件.作为一个学生助理,我早就对学校的问卷调查不满意了,填写完的纸质表格竟然还要输入成电子表格,人工手动输入,未免也太 ...
最新文章
- Android权限申请完全解析(一)：Android自带的权限申请
- php-5.3.3安装注意问题
- 【bzoj1565】[NOI2009]植物大战僵尸 拓扑排序+最大权闭合图
- 大数据如何在商业银行战略规划中发挥作用
- 五、redis和关系型数据库如何配合使用
- 全局变量和局部变量命名规则_变量范围和LEGB规则
- hdu1276 士兵队列训练问题-list容器
- linux pip3使用清华源_Linux实战016：Ubuntu搭建python开发环境
- java fx border_JavaFx UI控件与代码间的绑定方法
- Python numpy 多维数组切片
- 【路径规划】基于matlab粒子群算法机器人栅格路径规划【含Matlab源码 018期】
- virtio iommu
- FT232RL国产替代GP232RL USB2.0串口芯片
- 分析网易云用户运营的指标监控和召回机制
- 撩人飙新意，美汁源首次转战“AR微电影”，要你变身当“导演”
- 亚马逊账号关联：一生只能有一个店铺
- SystemSoftware
- 安卓手机小说阅读器_百万小说阅读器app免费版下载-百万小说阅读器app手机版下载v1.4...
- HTTP响应头使用X-Content-Options、X-XSS-Protection、X-Frame-Options
- 帝企鹅变形记：腾讯发展的秘密