前端知识案例学习15-实现3d得旋转

简介: 前端知识案例学习15-实现3d得旋转
<!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" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <main>
      <div class="cube">
        <div class="img1"></div>
        <div class="img2"></div>
        <div class="img3"></div>
        <div class="img4"></div>
        <div class="img5"></div>
        <div class="img6"></div>
      </div>
    </main>
  </body>
</html>
html,
body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
body {
  background-color: #2f3542;
}
main {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.cube {
  width: 250px;
  height: 250px;
  transform-style: preserve-3d;
  transform-origin: 125px 125px 0;
  animation: rotate-cube 10s ease-in-out infinite;
}
.cube > div {
  width: 250px;
  height: 250px;
  background-size: cover;
  background-position: center center;
  opacity: 0.8;
  position: absolute;
  box-shadow: inset 0 0 4px 2px rgba(106, 106, 106, 0.4);
}
/* 前 */
.cube .img1 {
  background-image: url("https://images.pexels.com/photos/274131/pexels-photo-274131.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
  transform: rotateY(0deg) translateZ(125px);
}
/* 右 */
.cube .img2 {
  background-image: url("https://images.pexels.com/photos/1480690/pexels-photo-1480690.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
  transform: rotateY(90deg) translateZ(125px);
}
/* 左 */
.cube .img3 {
  background-image: url("https://images.pexels.com/photos/36487/above-adventure-aerial-air.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
  transform: rotateY(-90deg) translateZ(125px);
}
/* 下 */
.cube .img4 {
  background-image: url("https://images.pexels.com/photos/338713/pexels-photo-338713.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
  transform: rotateX(90deg) translateZ(125px);
}
/* 上 */
.cube .img5 {
  background-image: url("https://images.pexels.com/photos/325044/pexels-photo-325044.jpeg?cs=srgb&dl=close-up-of-fish-over-black-background-325044.jpg&fm=jpg");
  transform: rotateX(-90deg) translateZ(125px);
}
/* 后 */
.cube .img6 {
  background-image: url("https://images.pexels.com/photos/404280/pexels-photo-404280.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
  transform: rotateY(180deg) translateZ(125px);
}
@keyframes rotate-cube {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  20% {
    /* 右边图片 */
    transform: rotateY(-90deg);
  }
  40% {
    /* 上 */
    transform: rotateX(-90deg);
  }
  60% {
    /* 左 */
    transform: rotateY(90deg);
  }
  80% {
    /* 下 */
    transform: rotateX(90deg);
  }
  100% {
    transform: rotateX(0deg) rotateY(0deg);
  }
}

image.png


相关文章
|
前端开发
前端小项目:旋转太极
前端小项目:旋转太极
72 0
|
移动开发 前端开发
前端(十八):移动端H5调用摄像头拍照旋转解决方案
移动端H5调用摄像头拍照旋转解决方案
388 0
|
3月前
|
监控 前端开发 数据可视化
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库,旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入,帮助开发者轻松实现3D场景与React项目的无缝融合。
280 8
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
|
7月前
|
前端开发
前端 CSS 经典:旋转边框效果
前端 CSS 经典:旋转边框效果
60 0
|
7月前
|
前端开发 JavaScript
前端 CSS 经典:3D Hover Effect 效果
前端 CSS 经典:3D Hover Effect 效果
90 0
|
7月前
|
前端开发 JavaScript
前端 CSS 经典:3D 渐变轮播图
前端 CSS 经典:3D 渐变轮播图
146 0
|
前端开发
前端-3D相册源码免费~
前端-3D相册源码免费~
|
9月前
|
前端开发
【零基础入门前端系列】—旋转、缩放、倾斜、过渡(二十三)
【零基础入门前端系列】—旋转、缩放、倾斜、过渡(二十三)
|
并行计算 前端开发 JavaScript
前端3D技术概述(1)
前端3D技术概述
2108 2
|
人工智能 前端开发 算法
前端如何快速实现 3D 虚拟形象?
前端如何快速实现 3D 虚拟形象?
1439 1

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    详解智能编码在前端研发的创新应用
  • 5
    巧用通义灵码,提升前端研发效率
  • 6
    智能编码在前端研发的创新应用
  • 7
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 8
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 9
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
  • 10
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    29
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    51
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 4
    巧用通义灵码,提升前端研发效率
    93
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    141
  • 6
    详解智能编码在前端研发的创新应用
    96
  • 7
    智能编码在前端研发的创新应用
    83
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    121
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    75