3d小例子

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

<!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;

/* 透视原点 */

-webkit-perspective-origin: 0 0;

-moz-perspective-origin: 0 0;

-ms-perspective-origin: 0 0;

-o-perspective-origin: 0 0;

perspective-origin: 0 0;

}

.father{

width: 100px;

height: 100px;

background: red;

position: relative;

top: 50%;

left: 50%;

margin-top: -50px;

margin-left: -50px;


-webkit-transition: all 100s;

-o-transition: all 100s;

transition: all 100s;


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

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

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

transform-style: preserve-3d;

/* delay 延迟 */

-webkit-transition-delay: 1s;

-o-transition-delay: 1s;

transition-delay: 1s;

}

.father>div{

width: 100px;

height: 100px;

background-color: green;

position: absolute;


top: 50%;

left: 50%;

margin-top: -50px;

margin-left: -50px;

}

.father:hover{

-webkit-transform: rotateX(36000deg);

-ms-transform: rotateX(36000deg);

-o-transform: rotateX(36000deg);

transform: rotateXS(36000deg);


-webkit-transition-timing-function: linear;

-o-transition-timing-function: linear;

transition-timing-function:linear;

}

div div:nth-child(1){

-webkit-transform: rotateY(30deg) translateZ(500px) ;

-ms-transform: rotateY(30deg) translateZ(500px) ;

-o-transform: rotateY(30deg) translateZ(500px) ;

transform: rotateY(30deg) translateZ(500px) ;

}

div div:nth-child(2){

-webkit-transform: rotateY(60deg) translateZ(500px) ;

-ms-transform: rotateY(60deg) translateZ(500px) ;

-o-transform: rotateY(60deg) translateZ(500px) ;

transform: rotateY(60deg) translateZ(500px) ;

}

div div:nth-child(3){

-webkit-transform: rotateY(90deg) translateZ(500px) ;

-ms-transform: rotateY(90deg) translateZ(500px) ;

-o-transform: rotateY(90deg) translateZ(500px) ;

transform: rotateY(90deg) translateZ(500px) ;

}

div div:nth-child(4){

-webkit-transform: rotateY(120deg) translateZ(500px) ;

-ms-transform: rotateY(120deg) translateZ(500px) ;

-o-transform: rotateY(120deg) translateZ(500px) ;

transform: rotateY(120deg) translateZ(500px) ;

}

div div:nth-child(5){

-webkit-transform: rotateY(150deg) translateZ(500px) ;

-ms-transform: rotateY(150deg) translateZ(500px) ;

-o-transform: rotateY(150deg) translateZ(500px) ;

transform: rotateY(150deg) translateZ(500px) ;

}

div div:nth-child(6){

-webkit-transform: rotateY(180deg) translateZ(500px) ;

-ms-transform: rotateY(180deg) translateZ(500px) ;

-o-transform: rotateY(180deg) translateZ(500px) ;

transform: rotateY(180deg) translateZ(500px) ;

}

div div:nth-child(7){

-webkit-transform: rotateY(210deg) translateZ(500px) ;

-ms-transform: rotateY(210deg) translateZ(500px) ;

-o-transform: rotateY(210deg) translateZ(500px) ;

transform: rotateY(210deg) translateZ(500px) ;

}

div div:nth-child(8){

-webkit-transform: rotateY(240deg) translateZ(500px) ;

-ms-transform: rotateY(240deg) translateZ(500px) ;

-o-transform: rotateY(240deg) translateZ(500px) ;

transform: rotateY(240deg) translateZ(500px) ;

}

div div:nth-child(9){

-webkit-transform: rotateY(270deg) translateZ(500px) ;

-ms-transform: rotateY(270deg) translateZ(500px) ;

-o-transform: rotateY(270deg) translateZ(500px) ;

transform: rotateY(270deg) translateZ(500px) ;

}

div div:nth-child(10){

-webkit-transform: rotateY(300deg) translateZ(500px) ;

-ms-transform: rotateY(300deg) translateZ(500px) ;

-o-transform: rotateY(300deg) translateZ(500px) ;

transform: rotateY(300deg) translateZ(500px) ;

}

div div:nth-child(11){

-webkit-transform: rotateY(330deg) translateZ(500px) ;

-ms-transform: rotateY(330deg) translateZ(500px) ;

-o-transform: rotateY(330deg) translateZ(500px) ;

transform: rotateY(330deg) translateZ(500px) ;

}

div div:nth-child(12){

-webkit-transform: rotateY(360deg) translateZ(500px) ;

-ms-transform:rotateY(360deg) translateZ(500px) ;

-o-transform: rotateY(360deg) translateZ(500px) ;

transform: rotateY(360deg) translateZ(500px) ;

}

</style>

</head>

<body>

<div class="father">

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

</div>

</body>

</html>

Vivian_shuang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
3dmax小案例制作
m0_64848307的博客
03-20 278
3dmax小案例制作
3D小案例
qq_45495031的博客
05-28 374
3D效果实现两面翻转的盒子 今天用3D制作一个简单的两面翻转的小盒子，以便大家更好的理解应用c3新特性的3D效果 题目要求：鼠标经过时，带有字样的小盒子进行两面翻转 题目分析： （1）多个盒子放在同一个盒子的同一个位置，需要使用定位（子绝父相） （2）运用html基本属性对盒子中字样进行一定的样式设置，不然文字容易跑偏 （3）运用 transform-style: preserve-3d属性，让背面的盒子保留立体空间，不然没有立体效果，该属性需要写在被观察元素的父级元素上 （4）前后两个盒子进行背靠背设置，
3d示例
林中明月间丶
04-28 230
&lt;style&gt; .box{ width: 100px; height: 100px; padding: 100px; border: 5px solid #000; margin: 30px auto; -webkit-transform-style:preserve-3d; -webkit-perspective:100px;/*景深 近大远小*/ } .div{ w...
3D动画案例
Scrow1204的博客
10-31 445
要点： 1.视距越大，看到的效果越小，跟小孔成像同样的原理 2.给父元素添加透视，会作用于子元素 3.backface-visibility设置背向浏览器是否可见 html： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;
3DMAX 小实例有源文件
11-22
一个小球运动源文件，简单，还是简单，喜欢的自己下吧！
3ds Max小白入门小案例|小圆木桌
weixin_44035986的博客
09-18 457
自学3D建模のNo.1引语作品展示制作流程创模赋材视图输出 引语 记录学习路程，抛砖引玉。如有更好的算法或者出现错误，欢迎指点。 作品展示 初接触3dsMax这个软件，最首要的是去熟悉一些基本操作。感觉这个小案例很不错，于是就总结分享给大家。 制作流程 分4个步骤： 创建模型 根据个人喜好或者要求选择相应的材料 设置摄像机然后进行视觉效果检验 渲染输出小作品 创模 打开3dsmax后，首先设置单位：<自定义>→<单位设置>→<系统单位设置> 然后创建出切角圆柱体
javaFX 3D小例子
12-30
在JavaFX中，开发者可以利用其3D功能来构建具有复杂视觉效果的应用，如本例中的“javaFX 3D小例子”，它是一个使用JavaFX 3D API实现的水分子模拟结构的Idea工程。 首先，我们要理解JavaFX 3D API的核心概念。...
opengl3d 小例子
07-29
这个“opengl3d 小例子”可能是为了帮助初学者理解和学习OpenGL在3D图形编程中的应用。下面我们将深入探讨OpenGL的基础知识、3D渲染原理以及如何通过实例学习OpenGL。 OpenGL是一个跨语言、跨平台的应用程序编程...
cocos3d小例子
06-21
【标题】：“cocos3d小例子”是一个关于Cocos3D引擎的示例项目，旨在展示该3D游戏开发框架的基本用法和特性。Cocos3D是基于Cocos2D-x扩展的一个强大工具，它为开发者提供了在2D游戏基础上构建3D场景和元素的能力。 ...
WPF 3D 小例子
10-26
**WPF 3D 小例子** 在Windows Presentation Foundation（WPF）中，3D图形渲染功能为开发者提供了丰富的工具来创建引人入胜的三维应用程序。本小例子旨在展示如何在WPF环境中构建一个简单的3D场景，其中包括一个带有...
java3D小例子
11-02
java3D的小例子
css3 3d 与案例分析
Wangxinlei_King的博客
09-14 417
作者：魔洁 聊到3d那我们就先聊聊空间维度，首先一维，比如一条线就是一个一维空间，连点成线在这个空间里这些点只能前进后退，二维空间就是一个平面，这时点不仅可以前进后退还可以左右移动，3维空间也可以说是...
一个简单的3D范例，是在别人基础上面整理的。
ajo3603的博客
12-26 94
一个简单的范例，是在别人基础上面整理的。原来的例子，框图太乱了，没有条理感。 http://pan.baidu.com/s/1eQTyGCE 转载于:https://www.cnblogs.com/wenluderen/p/5078156.html...
unity3d由小案例体会基础知识
weixin_41556165的博客
01-14 2341
如果有不懂得先看http://blog.csdn.net/weixin_41556165/article/details/79013817谢谢 一般使用ISO更加方便，大佬都这么用不要问我为什么 创建材质，紫色材质的地面。新建文件夹取名Materials，右键create->material并命名为Ground 创建一个场景，本案例只有一个场景命名为main 创建地面（放大两倍
transform 360°图片旋转
weixin_30265103的博客
08-30 283
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>360°图片旋转</title> <style> .wrap { width: 200px; height: 200px; transform-style: prese...
10个TWaver网页3D可视化精彩案例
TWaver可视化
12-09 7555
以下网页3D案例均为TWaver原创出品，推荐使用Chrome, FireFox, Safari等对WebGL支持良好的浏览器运行。案例排名不分先后，如需Demo，可直接申请试用。
盒子嵌套
Vivian_shuang的博客
07-06 3098
DOCTYPE html> html lang="en"> head> meta charset="UTF-8"> title>Documenttitle> style> #box1{ width: 50px; height:50px; background:#7FFF59; display: inline-block; border:5px solid #FFFD
映纷视觉小例子
Vivian_shuang的博客
07-06 2574
DOCTYPE html> html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> link rel="stylesheet"
冰艺小例子3
Vivian_shuang的博客
07-07 967
DOCTYPE html> html> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> title>title> link rel="stylesheet"
VisionPro 3D测量例子
最新发布
02-20
VisionPro 3D 测量技术可用于快速、准确地测量复杂的三维物体。这项技术可用于多种应用，如汽车、航空航天、机械制造等。它将利用多种技术，如激光测量、视觉检测和机器视觉等，来实现精确的三维测量和分析。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值