3D图片变换
2024-10-16 02:55:11
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style type="text/css">
/* 设置样式*/
7 img {
8 vertical-align: top;
9 }
10 .wrap {
11 margin: 50px auto;
12 width: 520px;
13 height: 280px;
14 border: 2px solid #000;
15 position: relative;
/*给父盒子设置景深*/
16 perspective: 800px;
17 }
18 #list {
19 margin: 0;
20 padding: 0;
21 list-style: none;
22 width: 520px;
23 height: 280px;
/*设置变换样式为3D模式*/
24 transform-style: preserve-3d;
25 transform: translateZ(-260px) rotateY(0deg);
26 transition: 1s;
27 }
28 #list li {
29 position: absolute;
30 left: 0;
31 top: 0;
32 }
/*依次设置角度*/
33 #list li:nth-of-type(1) {
34 transform: rotateY(0deg) translateZ(260px);
35 }
36 #list li:nth-of-type(2) {
37 transform: rotateY(90deg) translateZ(260px);
38 }
39 #list li:nth-of-type(3) {
40 transform: rotateY(180deg) translateZ(260px);
41 }
42 #list li:nth-of-type(4) {
43 transform: rotateY(270deg) translateZ(260px);
44 }
45 input {
46 position: absolute;
47 top: 120px;
48 width: 40px;
49 height: 40px;
50 border: 1px solid #ccc;
51 }
52 input:nth-of-type(1) {
53 left: -100px;
54 }
55 input:nth-of-type(2) {
56 right: -100px;
57 }
58 </style>
59 </head>
60 <body>
61 <div class="wrap">
62 <ul id="list" style="transform: translateZ(-260px) rotateY(0deg);">
63 <li>
64 <!-- <a href="#"> -->
65 <img src="../img/TB1b_TiQVXXXXcgXpXXSutbFXXX.jpg">
66 <!-- </a> -->
67 </li>
68 <li>
69 <!-- <a href="#"> -->
70 <img src="../img/TB1dfhhQVXXXXbJaXXXXXXXXXXX-520-280.jpg_q90_.webp">
71 <!-- </a> -->
72 </li>
73 <li>
74 <!-- <a href="#"> -->
75 <img src="../img/TB1mobOQVXXXXX_XVXXSutbFXXX.jpg">
76 <!-- </a> -->
77 </li>
78 <li>
79 <!-- <a href="#"> -->
80 <img src="../img/TB1MrrzQVXXXXXIapXXSutbFXXX.jpg">
81 <!-- </a> -->
82 </li>
83 </ul>
84 <input type="button" value="prev" id="prev">
85 <input type="button" value="next" id="next">
86 </div>
87 <script type="text/javascript">
88 var prev = document.getElementById('prev');
89 var next = document.getElementById('next');
90 var n1=0;
92 prev.onclick=function() {
//每点击一次旋转90度
93 n1+=90;
94 list.style.transform="translateZ(-260px) rotateY("+n1+"deg)";
95
96 }
97 next.onclick=function() {
//每点击一次旋转90度
99 n1-=90;
100 list.style.transform="translateZ(-260px) rotateY("+n1+"deg)";
101
102 }
103 </script>
104 </body>
105 </html>
最新文章
- Quartz —— Spring 环境下的使用
- 代码管理工具 --- git的学习笔记二《git的工作原理》
- java关于ArrayList中toArray方法的使用
- linux应用程序开发-进程通信(IPC)
- SQL Server被锁的表以及解锁
- IDEA 编译时报错 “未结束的字符串文字” “解析时已经达到文件结尾”
- Spring Boot工程发布到Docker
- 操作ACCESS数据库注意事项
- hdu 6045 Is Derek lying?（思维推导）
- Matlab将多项式的系数设为0
- DAG也许是真正的区块链3.0
- selenium3 文件系列之------读取properties文件
- Beta冲刺！ Day4 - 砍柴
- vue中检测敏感词，锚点
- Cannot retrieve metalink for repository: epel 错误解决办法
- myeclipse6.6+maven跑springside4.1的demo
- 设计模式 笔记 工厂方法 Factory Methon
- ASP.NET MVC学习之Log4Net配置（日志记录）
- bootstrap fileinput 文件上传
- 926. Flip String to Monotone Increasing