css3实现正方体和旋转效果

最新推荐文章于 2024-05-17 10:26:44 发布
最新推荐文章于 2024-05-17 10:26:44 发布
阅读量3.8k 收藏 19
点赞数 5
分类专栏： 前端小案例 文章标签： css3 3d动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rufeike/article/details/102685423
版权

css3实现正方体和旋转效果

实现效果图

在这里插入图片描述在这里插入图片描述

涉及知识点

  • 3D移动
    方法：translate3d(x,y,z)
    单独设置：translateX(length)，translateY(length)，translateZ(length)
  • 3D旋转
    方法：rotate3d(x,y,z,angle)
  • 3D动画结果保留设置
    transform-style:preserve-3d;子元素将保留其3d位置 --立体方式，被转换的子元素保留其3d转换结果（需要设置在父元素中）

实现步骤

  • 步骤一
    页面排版基本结构，一个div作为正方体主容器，内部6个div分别为前、后、左、右、上、下六个面，按以下样式进行基本样式设置，示例按200px宽高进行演示。为了能看到立体效果，需要先在父级元素.box中设置3D动画结果保留属性transform-style:preserve-3d;和主体沿着XY轴对角旋转30度；transform:rotate3d(1,1,0,-30deg);效果如下：
    在这里插入图片描述
    css样式
<style>
        * {
            padding: 0;
            margin: 0;
            /*禁止页面文字选择*/
            -moz-user-select:none; /* Firefox私有属性 */
            -webkit-user-select:none; /* WebKit内核私有属性 */
            -ms-user-select:none; /* IE私有属性(IE10及以后) */
            -khtml-user-select:none; /* KHTML内核私有属性 */
            -o-user-select:none; /* Opera私有属性 */
            user-select:none; /* CSS3属性 */
        }
        .box{
            position:relative;
            width: 200px;
            height: 200px;
            margin:200px auto;
             /*保留子元素3D动画效果*/
            transform-style:preserve-3d;
            /*俯角预览效果预设，方便查看3D效果*/
            transform:rotate3d(1,1,0,30deg);
        }

        .box>div{
            position:absolute;
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            /*设置透明度，方便查看*/
            opacity: 0.8;
        }
        .front {
            background-color: red;
        }

        .back {
            background-color: green;
        }

        .left {
            background-color: blue;
        }

        .right {
            background-color: cyan;
        }

        .top {
            background-color: pink;
        }

        .bottom {
            backgrond-color: purple;
        }

    </style>

元素结构

<div class="box">
    <div class="front">前面</div>
    <div class="back">后面</div>
    <div class="left">左面</div>
    <div class="right">右面</div>
    <div class="top">上面</div>
    <div class="bottom">下面</div>
</div>
  • 步骤二
    实现正面和背面的移动,正面沿着z轴向前移动100px transform:translateZ(100px);；背面向后移动100pxtransform:translateZ(-100px); 如下：
    在这里插入图片描述
<style>
	.front {
            background-color: red;
            transform:translateZ(100px);
        }

        .brack {
            background-color: green;
            transform:translateZ(-100px);
        }

</style>
  • 步骤三

左右两面移动，需要主要，应该是先实现移动再进行旋转，否则会因旋转改变坐标轴方向，影响移动结果；
左面：先沿着X左侧移动100px，再沿着Y轴逆时针旋转90度 transform:translateX(-100px) rotateY(-90deg);
在这里插入图片描述在这里插入图片描述
右面：先沿着X右侧移动100px，再沿着Y轴顺时针旋转90度 transform:translateX(100px) rotateY(90deg);

在这里插入图片描述在这里插入图片描述

.left {
  background-color: blue;
     transform:translate(-100px) rotateY(-90deg);
 }

 .right {
     background-color: cyan;
     transform:translate(100px) rotateY(90deg);
 }
  • 步骤四
    上面：先沿着Y上方移动100px，再沿着X轴顺时针旋转90度 transform:translateY(-100px) rotateX(90deg);
    下面：先沿着Y下方移动100px，再沿着X轴逆时针旋转90度 transform:translateY(100px) rotateX(-90deg);
    在这里插入图片描述
.top {
  background-color: pink;
    transform:translateY(-100px) rotateX(90deg);
}

.bottom {
    backgrond-color: purple;
    transform:translateY(100px) rotateX(-90deg);
}
  • 点击旋转动画
    css3伪类属性active中设置，动画旋转；点击时，会激活动画效果。同时.box样式中设置动画执行效果按5秒执行完成transition:transform 5s;
.box:active{
   transform:rotate3d(1,1,0,360deg) rotate3d(0,1,1,360deg);
}

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            /*禁止页面文字选择*/
            -moz-user-select:none; /* Firefox私有属性 */
            -webkit-user-select:none; /* WebKit内核私有属性 */
            -ms-user-select:none; /* IE私有属性(IE10及以后) */
            -khtml-user-select:none; /* KHTML内核私有属性 */
            -o-user-select:none; /* Opera私有属性 */
            user-select:none; /* CSS3属性 */
        }
        .box{
            position:relative;
            width: 200px;
            height: 200px;
            margin:200px auto;
            /*保留子元素3D动画效果*/
            transform-style:preserve-3d;
            /*俯角预览效果预设，方便查看3D效果*/
            transform:rotate3d(1,1,0,-30deg);
            /*定义动画执行时间*/
            transition:transform 5s;
        }

        .box>div{
            position:absolute;
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            /*设置透明度，方便查看*/
            opacity: 0.8;
        }
        .front {
            background-color: red;
            transform:translateZ(100px);
        }

        .brack {
            background-color: green;
            transform:translateZ(-100px);
        }

        .left {
            background-color: blue;
            transform:translateX(-100px) rotateY(-90deg);
        }

        .right {
            background-color: cyan;
            transform:translateX(100px) rotateY(90deg);
        }

        .top {
            background-color: pink;
            transform:translateY(-100px) rotateX(90deg);
        }

        .bottom {
            backgrond-color: purple;
            transform:translateY(100px) rotateX(-90deg);
        }
        .box:active{
            transform:rotate3d(1,1,0,360deg) rotate3d(0,1,1,360deg);
        }
    </style>
</head>
<body>
<div class="box">
    <div class="front">前面</div>
    <div class="brack">后面</div>
    <div class="left">左面</div>
    <div class="right">右面</div>
    <div class="top">上面</div>
    <div class="bottom">下面</div>
</div>
</body>
</html>
rufeike
关注
  • 5
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯CSS3绘制正方体旋转动画特效
06-24
纯CSS3绘制正方体旋转动画特效是一款3D立体效果不错的正方形旋转动画特效下载。
CSS3自动旋转正方体3D特效
07-28
在3D正方体旋转特效中，我们通常会将一个正方形的六个面分别分配到XYZ轴的正面、背面、左面、右面、上面和下面，通过调整这些面的相对位置和角度，模拟出一个立体的正方体。关键在于如何巧妙地使用`perspective`属性...
纯css实现旋转正方体
huangqiang80的博客
11-10 653
纯css实现旋转正方体 思路： 1、建一个父div作为正方体容器，在div里面建六个子div作为正方体六个面。 2、创建关键帧，让父div旋转起来。 效果： 代码： <style> /* 设置正方体容器 */ .fu { margin: 150px auto; height: 200px; width: 200px; /* 设置3d转换效果 */ transform-style: preserve-3d; animation: cube
Css属性transform详解（变形、旋转、缩放）
最新发布
宝子的博客
05-17 1323
1.变形就是指通过css来改变元素的形状或位置 2.变形不会影响到页面的布局(不会脱离文档流) 3.平移元素，百分比是相对于自身计算的1.通过旋转可以使用元素沿着x y 或 z旋转指定的角度(transform)
CSS3 transform动画 3D旋转立体正方形
weixin_44167504的博客
09-07 2018
CSS3 transform动画 旋转立体正方形 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>立体正方形</title> <style> #box {
css制作一个自动旋转的立方体
01-02 639
1.透视/景深效果 左手法则：大拇指指向当前坐标轴的下方向，手指环绕的方向就是正方向 perspective(length) 为一个元素设置三维透视的距离。仅作用于元素的后代，而不是其元素本身。当perspective:none/0;时，相当于没有设perspective(length)。比如你要建立一个小立方体，长宽高都是200px。如果你的perspective < 200px ，...
css3样式实现正方体旋转效果
critans的博客
10-15 737
css实现正方体旋转效果
css3动画，实现正方体旋转
一只程序猿
03-11 1153
思路很简单，大div里面放6个小div，小div使用绝对定位脱离文档流，3D转换加transform-Origin更改元素位置拼成一个正方体。最后使大div转动起来。 <template> <div class="flex jc_c ai_c" style="height: 800px;"> <div class="max_div"> <div class="box1">1</div> <div class="box2"
css3 实现正方体3D旋转
water_Popcorn的博客
11-29 702
源代码如下： html lang="en"> head> meta charset="UTF-8"> title>Titletitle> style> .all{ margin-left: 200px; width: 300px; height: 300px;
HTML5 纯CSS3实现正方体旋转3D效果，前端开发视频教程
m0_60634964的博客
03-27 117
实现代码：
纯css实现正方体图片旋转效果
weixin_40840206的博客
08-07 589
纯css实现正方体图片旋转效果目标效果基本思路代码实现主要困难 注意：（该代码暂未解决兼容性问题，在google浏览器中可顺利运行） 目标效果 鼠标移入之后，图片开始依次旋转平移，旋转平移完成后六面体开始旋转 基本思路 首先要为html添加上视距以保证z轴的平移 其次使用hover效果，利用transform实现翻转，利用transition过渡效果实现图片旋转平移，采用animutation实现动画的一直播放。 然后要体现“依次”，需在transition中加入延时效果 最后，需添加上transform
css3 手写正方体实现3D旋转
01-08
bg3 bg4 css： .container { position: absolute; width: 0; height: 0; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; transform-style: preserve-3d; animation: moves 3.5s linear...
旋转的正方体css3制作3D立体效果
09-08
本教程将深入探讨如何利用CSS3创建一个旋转的正方体，展示出3D立体效果，从而提升用户体验。 首先，我们需要理解CSS3中的3D变换基础。CSS3的`transform`属性允许我们对元素进行2D和3D的变换，如旋转、缩放、平移等...
css3 旋转正方体特效实现
xiyunmengyuan的博客
05-09 819
实现效果： 完整实现代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>旋转立方体</title> <style type="text/css"> .container{ width: 100%; height: 1000px; background-color: #f5f5f5; padding-
原生h5+css3 实现简单视频播放器组件
rufeike的博客
10-20 4345
视频播放器组件案例 实现效果 实现功能 全屏切换 进度条点击跳播 音量点击设置大小 涉及知识点 video对象属性 .duration 获取视频总长度（秒） .currentTime 当前播放时间（秒） .volume 获取音量或设置音量 （值0-1) .paused 是否暂停状态 （true/false) video 对象方法 .play() 播放 .pause() 暂停 ...
css3实现无缝滚动的轮播图
rufeike的博客
10-22 4227
css3实现无缝滚动的轮播图 效果图 css3动画知识应用 指定动画名称：animation-name: moveTest; 定义动画 @keyframes moveTest { 0% { transform: translate(100px); } 50% { ...
h5+css3简单实现网页端五子棋游戏1.0版
rufeike的博客
10-20 2729
H5+css3简单实现五子棋游戏 原理 主要使用H5的拖拽接口功能，通过拖拽移动棋子，目标位置通过接收拖拽棋子的拷贝元素，实现棋子摆放。 效果图如下 步骤 第一步：简单排版五子棋游戏页面，设定好棋盘排放区域，并把事先准备一张棋盘背景图片作为棋盘区域的背景图，使用background-size:contain平铺。并在棋盘上方画表格，让表格中的td内容位置刚好处于背景图片放置棋子的位置，红色虚...
h5+css3实现手风琴菜单效果
rufeike的博客
10-22 1756
h5+css3实现手风琴菜单效果 实现效果图 实现原理 通过控制二级菜单的高度过渡属性，实现菜单展开和收起。 过渡动画知识 简写语法：transition:property duration timing-function delay;或按以下属性单独设置 transition-property：规定设置过渡效果的css属性名称 transition-duration：规定完成过度效果需要多...
css3d旋转正方体
09-23
CSS3D旋转正方体可以通过使用CSS的transform属性来实现。使用rotate3d函数可以指定旋转轴和旋转角度。在给定的示例中，使用了一个名为box1的div元素，并在:hover时应用了旋转效果。 具体过程如下： 1. 创建一个包含正方体的div元素，设置宽度和高度，并将其position属性设置为absolute，以便在父元素中进行定位。 2. 使用transition属性设置动画过渡效果。 3. 使用:hover选择器为box1元素设置旋转效果。在这里，rotate3d函数被用来指定旋转轴和旋转角度。可以通过设置不同的参数值来实现不同的旋转效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值