CSS中2D属性、3D属性的学习以及实现立方体

最新推荐文章于 2025-04-14 18:20:59 发布
最新推荐文章于 2025-04-14 18:20:59 发布
阅读量1.5k 收藏 17
点赞数 37
文章标签： css 3d 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_53598426/article/details/139183511
版权

1.2D属性

  • 2D属性的旋转transform: rotate(45deg);
  • 2D属性的平移transform: translate(30px);
  • 2D属性的缩放transform: scale(0.5);
  • 2D属性的倾斜transform: skewY(20deg);

2.3D属性

  • 3D的属性按X轴进行旋转transform: rotateX(45deg)
  • 3D的属性按Y轴进行旋转transform: rotateY(45deg)
  • 3D的属性按Z轴进行旋转transform: rotateZ(45deg)
  • 3D的属性按X轴进行平移transform:translateX(50px)
  • 3D的属性按Y轴进行平移transform:translateY(50px)
  • 3D的属性按Z轴进行平移transform:translateZ(50px)

更多属性请点击查看

3.3D属性的实现

具体代码


<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D属性</title>
    <style>
        * {
     
            margin: 0;
            padding: 0;
        }
        .big-box {
     
            width: 300px;
            height: 300px;
            border: solid #000 2px ;
            margin: 100px auto;
            perspective: 800px;
            /* perspective 属性定义 3D 元素距视图的距离，以像素计,
            当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。*/
        }
        .big-box div {
     
            width: 300px;
            height: 300px;
            opacity: 0.5;   /* 规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。 */
            background: red;
        }
        .box1 {
     
            /* 3D的属性按X轴进行旋转 */
            transform: rotateX(45deg);
        }
        .box2 {
     
            /* 3D的属性按Y轴进行旋转 */
            transform: rotateY(45deg);
最低0.47元/天 解锁文章
css：transform的3D变换属性
YangLu888
04-10 1082
css:transform的3D变换
css之3d属性总结
Jared864的博客
04-08 695
Day23 1、 3D旋转 Rotate3d（x,y,z,度数）； 注：x y z 是一个矢量值，0不旋转 1旋转 2、 景深 Perspective: 900px; 表示站在900像素外看元素。值越大，距离越远（给父元素添加）。 通常的数值在900-1200之间，当足够远的时候，景深效果基本可以忽略不记。 3、 3D缩放 3d缩放，主要包括scaleZ（）和scale3d（）两个功能函数 注：...
css3D的魅力
weixin_33893473的博客
05-21 259
前言： 最近玩了玩用css来构建3D效果，写了几个demo，所以博客总结一下。  在阅读这篇博客之前，请先自行了解一下css 3D的属性，例如：transform-style，transform-origin，transform, perspective。   demo1 高度可变的立方体，先来看看最终效果，自己弄得有点丑，如果设计师调下色，添加点元素应该会好看的多 　　   1. ...
css中的3d使用：深入理解 CSS Perspective 与 Transform-Style
最新发布
一萧烟雨任平生
04-14 911
和是 CSS 3D 变换中不可或缺的两个属性。赋予了场景深度，模拟了观察者的视觉体验；而则决定了子元素如何在 3D 空间中呈现。掌握这两个属性的用法，将为您的网页设计带来更丰富的视觉层次和更具吸引力的交互体验。现在，不妨动手尝试一下，释放您的创意，打造出令人惊叹的 3D 世界吧！
21-CSS中的3D属性
CapejasmineY的博客
08-07 1240
CSS中的3D属性，3D平移、3D旋转、3D缩放，景深
css3之3D属性
qq_44193048的博客
04-26 312
在之前的一篇文章我只说了2D现在来说说3D。 1.translate 位移 translateX(): 指定X轴的位移; translateY(): 指定Y轴的位移; translateZ(): 指定Z轴的位移; translate3D(): 第一个参数指定X轴的位移量, 第二个参数指定Y轴的位移量, 第三个参数指定Z轴的位移量, 3个参数缺一不可;（这里是指3D） <!DOCTYPE ht...
day15
Z_l123的博客
07-30 187
CSS3的3D转换transform 平移 个数 属性 说明 1 transform ：none； 定义不进行转换。 transform ：translate(200px)；平移，默认是X轴移动，可以单位是%，这个%是自己的，不是父元素的 2 transform ：translateX(200px)； 根据
CSS3实现3D立方体旋转动画特效特效代码
03-20
在CSS3中，3D立方体旋转动画特效是一种利用现代浏览器对CSS3特性的支持，创建出具有立体感和动态变换效果的图形技术。这种特效不仅能够提升网站的视觉吸引力，还能为用户交互提供新颖的方式。以下是关于CSS3实现3D...
一款利用html5和css3实现的3D立方体旋转效果教程
09-27
创建3D立方体旋转效果的过程中，通常会涉及到几个步骤，首先是创建立方体的基本结构，然后通过CSS对立方体的每个面进行独立的变换。例如，可以设置立方体容器（container）的transform-style为preserve-3d，这样容器...
3D立方体图标菜单CSS3代码.rar_3D立方体图标菜单CSS3代码
09-20
总的来说，这个“3D立方体图标菜单CSS3代码”资源展示了如何结合CSS3的3D转换和jQuery来创建动态、互动的UI元素，这在现代Web开发中是一个重要的技能。掌握这种方法不仅可以提升网站的视觉吸引力，还可以提高用户与...
CSS3-3D动画制作旋转立方体
01-20
首先，制作旋转立方体的核心在于理解3D空间中的旋转和平移。立方体由六个正方形div组成，每个div代表立方体的一个面。通过绝对定位，我们可以让这些div在页面上形成一个立方体的形状。接下来，利用CSS3的`rotateX`, ...
3D-css-transform.zip
09-17
3D-css-transform.zip,css转换操场。可视化二维和三维css3转换功能的在线工具。,3D建模使用专门的软件来创建物理对象的数字模型。它是3D计算机图形的一个方面，用于视频游戏，3D打印和VR，以及其他应用程序。
css3d的基础属性
2401_84229405的博客
05-11 286
取值：repeat(表示在水平方向和垂直方向都重复)，repeat-x(表示在水平方向上平铺)，repeat-y(表示在垂直方向上平铺)，no-repeat(表示不平铺，只显示一张图案)。Δ背景属性： background、background-attachment、background-color、background-image、background-position和background-repeat。在css中，颜色属性可以设置元素内文本颜色，而各种背景属性可以控制元素的背景颜色以及背景图案。
css 实现3D效果
蓝朽的小世界
04-03 7033
css实现3d效果
HTML+CSS教程（十）css3(3D属性详解及动画)
qq_43434300的博客
11-25 2071
一.3D 转换 1.左手坐标系 :伸出左手,让拇指和食指成“L”形,大拇指向右,食指向上,中指指向前方.这样我们就建立了一个左手坐标系,拇指,食指和中指分别代表X、Y、Z 轴的正方向. 2. CSS 中的 3D 坐标系 CSS3 中的 3D 坐标系与上述的 3D 坐标系是有一定区别的,相当于其绕着 X 轴旋转了 180 度. 3.左手法则 左手握住旋转轴,竖起拇指指向旋转轴正方向,正向就是其余...
CSS3——2D、3D和动画相关属性
X-77
08-10 507
CSS3中2D、3D和动画的相关属性，详细！
CSS3 简单的2d, 3d基础属性
dudulela的博客
06-03 398
CSS3 动画移动     html代码：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body
css 3d效果
qq_18661257的专栏
10-09 575
css3 3d效果 3d空间 一个元素需要一个属性才能激活3D空间，有两种方法激活3D空间： 使用transform属性，赋上perspective函数作为值。 transform: perspective(###); 或使用perspective属性。 perspective: ###; 两者对于当个元素的作用是一样的，但是前者却是只针对单个元素，而后者可以针对一个孔家的所有元素。
CSS—2D和3D属性
Scrow1204的博客
08-14 385
HTML代码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;动画练习&lt;/title&gt; &lt;link rel="stylesheet" type=&qu
CSS3 3D立方体效果详解：transform属性实战
在本文中，我们将深入探讨CSS3的transform属性，特别关注如何实现3D立方体效果。transform属性是CSS3的一个强大特性，允许我们对元素进行各种变换，如移动、缩放、旋转和倾斜，从而为网页带来丰富的动态视觉效果。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

deng_hongbin

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值