web前端html+css实现立体旋转相册(表白可用)

1、主要用到的属性transform，position

1、transform:translate(X/Y/Z)() ：向X、Y、Z轴方向做平移

2、transform:rotate(X/Y/Z)() ：向X、Y、Z轴方向做旋转

3、transform-origin: （）：设置旋转轴

4、transform-style:preserve-3d ：支持3D效果

3、position：relative ：相对定位

5、position：absolute：绝对定位

6、perspective: 视距

2、搭建主要框架

首先搭建一个正方体需要6个面那么我们可以先用相对定位和觉得定位将所有图片放到同一位置。例如图中的A位置，然后将相应的图根据绝对定位移到相应的位置然后根据对应的旋转轴旋转到对应位置。比如B图需要向左移动图片A宽度的像素假设为200px那么就需要 left:-200px 的定义然后定义他的旋转轴为BA相交的线也就是右边即 transform-origin: right 然后沿着Y轴旋转90° 即 transform:rotateY(90deg) 其他图片也做对应的处理

3、实现旋转

使用@keyframes来设置动画效果form为开始to为结尾，也可以用百分比来设置

@keyframes myAnnimation{form{}to{}

4、代码

这里可以利用伪类让鼠标移动到相册上图片就加一些平移效果让相册的视觉冲击更强烈

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">body{perspective: 800px;}@keyframes myAnimation {from{transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}to{transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);}}.container{width: 400px;height: 400px;margin: 1000px auto;position: relative;transform-style: preserve-3d;animation: myAnimation 10s infinite linear;}.container > div{width: 400px;height: 400px;position: absolute;}.container > div > img {float: left;width: 200px;height: 200px;}.container > div:nth-child(2){left: -400px;transform-origin: right;transform: rotateY(90deg);}.container:hover > div:nth-child(2){transform: translateX(-100px)rotateY(90deg);}.container:hover > div:nth-child(2)>img:nth-child(1){transform: translateX(-50px) translateY(-50px);}.container:hover > div:nth-child(2)>img:nth-child(2){transform: translateX(50px) translateY(-50px);}.container:hover > div:nth-child(2)>img:nth-child(3){transform: translateX(-50px) translateY(50px);}.container:hover > div:nth-child(2)>img:nth-child(4){transform: translateX(50px) translateY(50px);}.container > div:nth-child(3){left : 400px;transform-origin: left;transform: rotateY(-90deg);}.container:hover > div:nth-child(3)>img:nth-child(1){transform: translateX(-50px) translateY(-50px);}.container:hover > div:nth-child(3)>img:nth-child(2){transform: translateX(50px) translateY(-50px);}.container:hover > div:nth-child(3)>img:nth-child(3){transform: translateX(-50px) translateY(50px);}.container:hover > div:nth-child(3)>img:nth-child(4){transform: translateX(50px) translateY(50px);}.container:hover > div:nth-child(3){transform:translateX(100px) rotateY(-90deg);}.container > div:nth-child(4){top:  -400px;transform-origin: bottom;transform: rotateX(-90deg);}.container:hover > div:nth-child(4)>img:nth-child(1){transform: translateX(-50px) translateY(-50px);}.container:hover > div:nth-child(4)>img:nth-child(2){transform: translateX(50px) translateY(-50px);}.container:hover > div:nth-child(4)>img:nth-child(3){transform: translateX(-50px) translateY(50px);}.container:hover > div:nth-child(4)>img:nth-child(4){transform: translateX(50px) translateY(50px);}.container:hover > div:nth-child(4){transform: translateY(-100px) rotateX(-90deg);}.container > div:nth-child(5){bottom : -400px;transform-origin: top;transform: rotateX(90deg);}.container:hover > div:nth-child(5)>img:nth-child(1){transform: translateX(-50px) translateY(-50px);}.container:hover > div:nth-child(5)>img:nth-child(2){transform: translateX(50px) translateY(-50px);}.container:hover > div:nth-child(5)>img:nth-child(3){transform: translateX(-50px) translateY(50px);}.container:hover > div:nth-child(5)>img:nth-child(4){transform: translateX(50px) translateY(50px);}.container:hover > div:nth-child(5){transform: translateY(100px) rotateX(90deg);}.container:hover > div:last-child{transform: translateZ(500px);}.container:hover > div:nth-child(6)>img:nth-child(1){transform: translateX(-50px) translateY(-50px);}.container:hover > div:nth-child(6)>img:nth-child(2){transform: translateX(50px) translateY(-50px);}.container:hover > div:nth-child(6)>img:nth-child(3){transform: translateX(-50px) translateY(50px);}.container:hover > div:nth-child(6)>img:nth-child(4){transform: translateX(50px) translateY(50px);}.container:hover > div:first-child{transform: translateZ(-100px);}.container:hover > div:nth-child(1)>img:nth-child(1){transform: translateX(-50px) translateY(-50px);}.container:hover > div:nth-child(1)>img:nth-child(2){transform: translateX(50px) translateY(-50px);}.container:hover > div:nth-child(1)>img:nth-child(3){transform: translateX(-50px) translateY(50px);}.container:hover > div:nth-child(1)>img:nth-child(4){transform: translateX(50px) translateY(50px);}.container > div:nth-child(6){transform: translateZ(400px);}</style>
</head>
<body><div class="container"><div><img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.s5alQa1zC-YRd_6hOj1I6AHaGI?w=198&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"><img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.0BPElpPEJvBN9aQ8w73EDAHaEo?w=264&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.SQ3NWEFNBscPLbU7Jg8GYwHaEK?w=293&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.Zr5uPHLVSNguKkmIQfos_wAAAA?w=165&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"></div><div><img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.drgMM3Em68m3kcDNw-tjWQAAAA?w=165&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"><img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.dRAbgTM8_cqW-iRt9LCEBAHaGH?w=200&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"><img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.b_OQVqDrnGYibO3ts5CLBAAAAA?w=137&h=150&c=7&r=0&o=5&dpr=1.1&pid=1.7"><img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.xEv7aAiKIk0onZLcCCRT2wHaFE?w=242&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"></div><div><img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.RtG_5vDB1tuDvpQhHbZ7iwHaEo?w=264&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"><img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.0V1jtIQ1N-6JODOzUFXjnQHaEo?w=256&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"><img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.HwcUxD_avhYsWdGrqK5kegAAAA?w=155&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"><img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.bxvvwr1QG_I987xHgtGfQgHaEK?w=280&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"></div><div><img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.bxvvwr1QG_I987xHgtGfQgHaEK?w=280&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"><img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.0V1jtIQ1N-6JODOzUFXjnQHaEo?w=256&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"><img src=" https://tse3-mm.cn.bing.net/th/id/OIP-C.5m2QUQNO4M3vA7rIId2v-wHaE8?w=246&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"><img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.hRU2VTq-nxInfpT-s-6PVQHaE8?w=246&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"></div><div><img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.3CLkNg7Tu9fUO7MIa_R6IwHaEo?w=247&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.TRhFqkkVRgSoM0SUeDnRWwAAAA?w=257&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"><img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.9SD4AMFTIP4z9hhZLr6k_AAAAA?w=226&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.00QhpPLlFsVD-nVDv8qBKwAAAA?w=177&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"></div><div><img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.lBPfaEXMhbdNizwzO154jQHaE8?w=250&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"><img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.2nWl4S4HgdO1flOWVS8ksAHaEo?w=270&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"><img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.5J1TtPKNxy9toKNmID9PDgHaEK?w=317&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.dAAyBtUSZzzNDnlUIW8A0AHaHa?w=178&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"></div></div>
</body>
</html>

5、效果展示

web旋转相册

web前端html+css实现立体旋转相册(表白可用)相关推荐

解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果
解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果一.前言最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...
js制作3d立体旋转相册
使用js做一个3d立体旋转相册可自由拖拽源码如下 <!DOCTYPE html> <html> <head> <meta charset="ut ...
canvas clear 指定属性的元素_好程序员web前端分享CSS属性组成及作用
好程序员web前端分享CSS属性组成及作用学习目标 1.css属性和属性值的定义 2.css文本属性 3.css列表属性 4.css背景属性 5.css边框属性 6.css浮动属性一.css属性和 ...
小白学Java Web 3 Web前端之CSS基本知识2
这一篇接着上一篇的内容来分享,上一篇还有大量的样式属性没有列出,不过在继续分享之前,我想先来分享一下关于网页的布局相关的一些东西,因为下一篇我打算分享用仅仅前面三小篇的内容来制作一个简单的静态网页, ...
HTML+CSS制作3D旋转相册
一.HTML+CSS制作3D旋转相册哈哈哈,放寒假啦!又可以好好闭关修炼了,最近,在抽屉里无意中翻到了自己上小学时的照片,太可爱啦,照片我就不贴出来了,于是,我就想着用所学的知识,做一个3D旋转相册 ...
Web前端HTML+CSS全套（1~20）
Web前端HTML+CSS全套(1~20) 拨云见日 CSS基础切图流程 PC企业站布局 PC游戏站布局溯本求源 HTML扩展 CSS扩展 HTMLS新语法 CSS3新语法兼容与hack 风生水 ...
C3+H5小案例 | 03 3D立体旋转相册
代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8&q ...
Web前端，CSS中盒子模型的组成，了解掌握盒子模型的边框、内边距、外边距
前言持续总结输出中,今天分享的是Web前端,CSS中盒子模型的组成,了解掌握盒子模型的边框.内边距.外边距 1.盒子模型的介绍盒子的概念页面中的每一个标签,都可看做是一个 "盒子&qu ...
Web前端，CSS中的浮动、清除浮动
前言持续总结输出中,今天分享的是Web前端,CSS中的浮动.清除浮动.浮动和清除浮动是我们常用的css样式.今天我们就来了解他们. 1.浮动的作用早期的作用:图文环绕现在的作用:网页布局 • 场 ...

web前端html+css实现立体旋转相册(表白可用)

1、主要用到的属性transform，position

1、transform:translate(X/Y/Z)() ：向X、Y、Z轴方向做平移

2、transform:rotate(X/Y/Z)() ：向X、Y、Z轴方向做旋转

3、transform-origin: （）：设置旋转轴

4、transform-style:preserve-3d ：支持3D效果

3、position：relative ：相对定位

5、position：absolute：绝对定位

6、perspective: 视距

2、搭建主要框架

3、实现旋转

使用@keyframes来设置动画效果form为开始to为结尾，也可以用百分比来设置

4、代码

这里可以利用伪类让鼠标移动到相册上图片就加一些平移效果让相册的视觉冲击更强烈

5、效果展示

web前端html+css实现立体旋转相册(表白可用)相关推荐

最新文章

热门文章

web前端html+css实现立体旋转相册(表白可用)

1、主要用到的属性transform，position

1、transform:translate(X/Y/Z)() ： 向X、Y、Z轴方向做平移

2、transform:rotate(X/Y/Z)() ： 向X、Y、Z轴方向做旋转

3、transform-origin: （） ： 设置旋转轴

4、transform-style:preserve-3d ： 支持3D效果

3、position：relative ：相对定位

5、position：absolute： 绝对定位

6、perspective: 视距

2、搭建主要框架

3、实现旋转

使用@keyframes来设置动画效果form为开始to为结尾，也可以用百分比来设置

4、代码

这里可以利用伪类让鼠标移动到相册上图片就加一些平移效果让相册的视觉冲击更强烈

5、效果展示

web前端html+css实现立体旋转相册(表白可用)相关推荐

最新文章

热门文章

1、transform:translate(X/Y/Z)() ：向X、Y、Z轴方向做平移

2、transform:rotate(X/Y/Z)() ：向X、Y、Z轴方向做旋转

3、transform-origin: （）：设置旋转轴

4、transform-style:preserve-3d ：支持3D效果

5、position：absolute：绝对定位