3d魔方

最新推荐文章于 2021-07-26 11:48:41 发布
最新推荐文章于 2021-07-26 11:48:41 发布
阅读量439 收藏
点赞数
分类专栏： CSS 文章标签： 3d 动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Vivian_shuang/article/details/51848128
版权

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

html, body{

height: 100%;

}

body{

perspective: 1000px;


-webkit-transform-style: preserve-3d;

-moz-transform-style: preserve-3d;

-ms-transform-style: preserve-3d;

transform-style: preserve-3d;

}

.father{

width: 200px;

height: 200px;

/*background-color: gray;*/

position: relative;

top: 50%;

left: 50%;

margin-top: -100px;

margin-left: -100px;

/*opacity: 0.5;*/

-webkit-transition: all 50s;

-o-transition: all 50s;

transition: all 50s;


-webkit-transform-style: preserve-3d;

-moz-transform-style: preserve-3d;

-ms-transform-style: preserve-3d;

transform-style: preserve-3d;


-webkit-transition-timing-function:linear;

-o-transition-timing-function:linear;

transition-timing-function:linear;

}

div img{

width: 200px;

height: 200px;

}

div div:nth-child(1){

width: 200px;

height: 200px;

background-color: blue;

position: absolute;

top: 50%;

left: 50%;

margin-top: -100px;

margin-left: -100px;

/*opacity: 0.5;*/

-webkit-transform: rotateX(-45deg) rotateY(45deg) translateZ(100px);

-ms-transform:  rotateX(-45deg) rotateY(45deg) translateZ(100px);

-o-transform: rotateX(-45deg) rotateY(45deg) translateZ(100px);

transform: rotateX(-45deg) rotateY(45deg) translateZ(100px);

}

div div:nth-child(2){

width: 200px;

height: 200px;

background-color: green;

position: absolute;

top: 50%;

left: 50%;

margin-top: -100px;

margin-left: -100px;

/*opacity: 0.5;*/

-webkit-transform: rotateX(-45deg) rotateY(45deg) translateZ(-100px);

-ms-transform:  rotateX(-45deg) rotateY(45deg) translateZ(-100px);

-o-transform: rotateX(-45deg) rotateY(45deg) translateZ(-100px);

transform: rotateX(-45deg) rotateY(45deg) translateZ(-100px);

}

div div:nth-child(3){

width: 200px;

height: 200px;

background-color: orange;

position: absolute;

top: 50%;

left: 50%;

margin-top: -100px;

margin-left: -100px;

/*opacity: 0.5;*/

-webkit-transform: rotateX(45deg) rotateZ(-45deg) translateZ(-100px);

-ms-transform:  rotateX(45deg) rotateZ(-45deg) translateZ(-100px);

-o-transform: rotateX(45deg) rotateZ(-45deg) translateZ(-100px);

transform: rotateX(45deg) rotateZ(-45deg) translateZ(-100px);

}

div div:nth-child(4){

width: 200px;

height: 200px;

background-color: orange;

position: absolute;

top: 50%;

left: 50%;

margin-top: -100px;

margin-left: -100px;

/*opacity: 0.5;*/

-webkit-transform: rotateX(45deg) rotateZ(-45deg) translateZ(100px);

-ms-transform:  rotateX(45deg) rotateZ(-45deg) translateZ(100px);

-o-transform: rotateX(45deg) rotateZ(-45deg) translateZ(100px);

transform: rotateX(45deg) rotateZ(-45deg) translateZ(100px);

}

div div:nth-child(5){

width: 200px;

height: 200px;

background-color: pink;

position: absolute;

top: 50%;

left: 50%;

margin-top: -100px;

margin-left: -100px;

/*opacity: 0.5;*/

-webkit-transform:rotateX(-45deg) rotateY(-45deg) translateZ(-100px);

-ms-transform: rotateX(-45deg) rotateY(-45deg)  translateZ(-100px) ;

-o-transform:rotateX(-45deg) rotateY(-45deg)  translateZ(-100px) ;

transform: rotateX(-45deg) rotateY(-45deg)   translateZ(-100px);

}

div div:nth-child(6){

width: 200px;

height: 200px;

background-color: purple;

position: absolute;

top: 50%;

left: 50%;

margin-top: -100px;

margin-left: -100px;

/*opacity: 0.5;*/


-webkit-transform:rotateX(-45deg) rotateY(-45deg) translateZ(100px);

-ms-transform: rotateX(-45deg) rotateY(-45deg)  translateZ(100px) ;

-o-transform:rotateX(-45deg) rotateY(-45deg)  translateZ(100px) ;

transform: rotateX(-45deg) rotateY(-45deg)   translateZ(100px);

}

.father:hover{

-webkit-transform: rotateY(3000deg);

-ms-transform: rotateY(3600deg);

-o-transform: rotateY(3600deg);

transform: rotateY(3600deg);

}

.father div{

border-radius: 70px;

box-shadow: inset 10px 10px 200px springgreen,0 0 150px springgreen;

}

</style>

</head>

<body>

<div class="father">

<div><img src="img/1.jpg" alt=""></div>

<div><img src="img/2.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>

Vivian_shuang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
樱花雨3d魔方旋转相册
09-17
"樱花雨3D魔方旋转相册"是一个利用三维效果展示照片的互动应用。这个项目的核心在于通过HTML5、CSS3以及JavaScript等技术实现3D魔方的动态旋转和图片展示，为用户带来视觉上的独特体验。下面我们将深入探讨这个项目...
unity3d魔方源码
05-10
"unity3d魔方源码"项目显然是利用Unity3D来实现一个虚拟的魔方游戏或者教学工具。下面我们将深入探讨这个主题涉及的相关知识点。 1. **Unity3D基础**：Unity3D使用C#编程语言，通过Unity Editor进行场景构建、资源...
数字变换
weixin_30457881的博客
08-09 683
题目： 如果一个数x的约数和（不包括它本身，下同）比它本身小，那么x可以变成它的约数和；如果对于某个y>x且y的约数和为x，那么x也可以变成y。例如，4可以变为3，1可以变为7。限定所有的数字变换在不超过n的正整数范围内进行，求不断进行数字变换且没有重复数字出现的最多变换步数。（n<=1e5） 题解： 是一道比较好的题目 会发现是无环的，所以求树的直径就可以了 转载于:h...
数字转换
weixin_30241919的博客
11-04 149
题目描述 如果一个数x的约数和y（不包括他本身）比他本身小，那么x可以变成y，y也可以变成x。例如4可以变为3，111可以变为7。限定所有数字变换在不超过n的正整数范围内进行，求不断进行数字变换且不出现重复数字的最多变换步数。 输入格式 输入一个正整数n。 输出格式 输出不断...
3D魔方
学习记录专栏
06-26 407
首先这个程序是建立的是Windows应用程序，建立控制台程序是不能运行的，另外，项目——项目属性——配置属性——常规-----使用多字节字符集，这样编译才能够通过的，否则如果选择使用 Unicode 字符集，编译会有错误提示：error C2440: “初始化”: 无法从“const char [8]”转换为“LPCTSTR”，另外，链接器----输入----附加依赖项要加入：“opengl32.
3D魔方_3D3阶魔方_
10-03
在IT领域，3D魔方软件是利用计算机技术模拟真实三阶魔方的工具，它为用户提供了在电脑上体验和解决魔方的便捷途径。3D3阶魔方指的是具有三个维度，每一维度都有三层的魔方玩具，是魔方世界中最经典且最普及的一种...
Android 3D魔方
07-09
超实用的Android游戏开发案例，可在虚拟器和手机上实时测试
html实现的3D魔方
01-02
HTML实现的3D魔方是一种基于Web技术的交互式图形应用，它利用HTML5、CSS3和JavaScript等技术，为用户提供了在浏览器中玩转3D魔方的体验。这个项目不仅展示了HTML5的潜力，还揭示了现代Web开发中的交互性和动态图形...
抖音很火的立方体相册.zip
12-04
最近抖音很火的立方体相册来啦！本资源包含了CSS文件，img，JS，下载后可以直接打开页面就能看到效果，你也可以替换成自己的照片，修改里面的样式。里面有详细的注释，它将会是你学习的好资源也是撩妹的好技能。
3D旋转魔方
12-29
3D旋转魔方，实现按键控制魔方的旋转，含花式旋转和自动复原等功能，VS可直接运行(要配置相关OpenGL库）
抖音3D相册.三种效果zip
01-29
抖音里的3D相册效果，三种不同效果的例子，打开直接能看到效果不需要任何操作 感觉挺漂亮，自己分析了一下。 整理里一个自己可以换相片
3D魔方游戏
hongwei81的专栏
11-13 817
很高兴，在这里发布我的第一款游戏，应该说是第一款OpenGL小游戏， 因为前一阵用DirectX做了一款太空游戏，不太完善，后来因为要写论文就搁置了．和同学聊天时想到了这个小魔方，于是就想着将它实现掉．希望大家给予指导QQ:43835688Email:hongwei81@163.com
3D立体相册，一个可旋转的立体相册
热门推荐
攻城狮的家园
05-24 3万+
11359.gif 主要功能：立体球体展示 可自行添加本地照片 可旋转，照片可放大 商城下载： App Store github下载 用的代码是用的云标签的code，代码略有改动 主要代码调用 // 调用展示 self.sphereView = [[YoungSphere alloc] initWithFrame:CGRectMake(20, 200, 340, 320)
魔方 3D 模型
qungxue的专栏
10-23 3701
一段时间，刚毕业的时候，想写一个可以玩的魔方3D模型，隔了很久都没有怎么经历去写，总以为这是要消耗挺多时间经历，去年一段时间，在周末时间还是难耐的想是想自己的想法，最后用java swing写了一个简单的模型。 这边就记录下来。 当然现在已经是写好了，完事后，只是放在硬盘上一直都没有再去动，应为想安装个linux系统，这边准备格式化硬盘，就想着把他放到网上去，这不算是分享，因为太懒，这边只是附
【学习OpenCV4】图像变换方法总结（放缩、翻转、旋转）
Huffie博客
07-26 1445
常见的图像变换方法包括图像的放缩、图像的翻转、图像的旋转等。在OpenCV中，这些图像变换操作都有着其对应的函数。通过对函数定义的解释以及具体例子，介绍各种图像变换的方法。
Android 3D魔方设计与实现
"基于Android的3D魔方设计实验指导书" 这篇实验指导书主要围绕基于Android平台的3D魔方设计展开，旨在帮助学习者掌握Android应用开发和3D图形编程技术，特别是OpenGLES的应用。Android是由Google推出的一个开源操作...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值