css动画效果制作正方体旋转相册

以下代码利用css动画效果制作了一个旋转的正方体，给正方体六个面放置好图片就可以当一个炫酷有趣的正方体旋转相框啦！可以将女朋友的照片放进去哦，赶快去试试，给女朋友一个惊喜吧！

下面没有放入背景建议大家可以自己设置一下背景，让画面更浪漫。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.fa {position: relative;height: 310px;width: 310px;margin: 200px auto;transform-style: preserve-3d;transform: rotate3d(1, 0, 0, 0deg);animation: zheng;animation-duration: 20s;animation-iteration-count: infinite;}div>img {height: 200px;width: 200px;}.fa>div {height: 300px;width: 300px;position: absolute;border: 2px solid #444;}.fa>div:nth-child(2) {transform-origin: left;transform: rotate3d(0, 1, 0, -90deg);}.fa>div:nth-child(3) {transform-origin: right;transform: rotate3d(0, 1, 0, 90deg);}.fa>div:nth-child(4) {transform-origin: top;transform: rotate3d(1, 0, 0, 90deg);}.fa>div:nth-child(5) {transform-origin: bottom;transform: rotate3d(1, 0, 0, -90deg);}.fa>div:nth-child(6) {transform: translate3d(0, 0, 300px);}div>img {height: 300px;width: 300px;}@keyframes zheng {from {transform: rotate3d(1, 0, 0, 360deg);;}25% {transform: rotate3d(0, 1, 0, 0deg);;}50% {transform: rotate3d(0, 1, 0, 360deg);;}to {transform: rotate3d(1, 0, 0, 0deg);;}}</style>
</head><body><div class="fa"><!-- 在此处更换照片 --><div><img src="img/2.jpg" alt=""></div><div><img src="img/1.jpg" alt=""></div><div><img src="img/3.jpg" alt=""></div><div><img src="img/4.jpg" alt=""></div><div><img src="img/5.jpg" alt=""></div><div><img src="img/6.jpg" alt=""></div></div>
</body></html>

css动画效果制作正方体旋转相册相关推荐

HTML+CSS制作3D旋转相册
一.HTML+CSS制作3D旋转相册哈哈哈,放寒假啦!又可以好好闭关修炼了,最近,在抽屉里无意中翻到了自己上小学时的照片,太可爱啦,照片我就不贴出来了,于是,我就想着用所学的知识,做一个3D旋转相册 ...
Css动画效果旋转卡牌
这次我们来实现一个用css动画效果敲打出来一个旋转卡牌的小案列. 首先把img图片框架敲打出来,给它一个div标签,里面包裹六个img标签. 放进去图片之后,然后给图片设置一下css样式. 设置tra ...
html怎么做成3d正方体,利用CSS3的3D效果制作正方体
学会用CSS3的3D效果制作一个正方体,有助于增强我们对3D场景的旋转和位移属性的理解.下面的动态图就是利用3D旋转位移,结合动画效果制作的.感兴趣的同学可以在完成正方体的制作基础上,再去探究一下添加 ...
css3制作正方体,利用CSS3的3D效果制作正方体
学会用css3的3d效果制作一个正方体,有助于增强我们对3d场景的旋转和位移属性的理解.下面的动态图就是利用3d旋转位移,结合动画效果制作的.感兴趣的同学可以在完成正方体的制作基础上,再去探究一下添加 ...
赞！15个来自 CodePen 的酷炫 CSS 动画效果
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
CSS动画效果构成分析
CSS动画特效的基本构成文章目录 CSS动画特效的基本构成 CSS动画效果一.动画轨迹,运动路径 1.规定目标样式属性transfrom: 二.控制运动路径 transition animati ...
用HTML+CSS代码写一个3D旋转相册
看到有些人好奇用css怎么写出3D旋转相册的效果. 这里说说一种方法. 首先看一下效果写出这样的效果可以使用css的transform3D的变换效果: 第一步写出主体注意:因为演示都是使用同一张背 ...
android 原生砸金蛋动画,C4D-砸金蛋动画效果制作
本篇教程讲C4D-砸金蛋动画效果制作,喜欢的一起来学习吧! 那就开始今天的课程吧. 1.搭建画面中的场景.打开C4D,创建一个圆柱,[半径]为900,[高度]为200,[高度分段]为2,[旋转分段]为 ...
如何用CSS动画特效让图片旋转起来
杜老师逆战班学员 2020.02.22 我们通常浏览网页,基本上看过去都是呈现着各种文字加图片的2D效果信息,作为一名前端开发工程师非常重要的工作就是要让用户看到网页时有眼前一亮.耳目一新的感觉,用户 ...

css动画效果制作正方体旋转相册

css动画效果制作正方体旋转相册相关推荐

最新文章

热门文章