CSS3D魔法——旋转魔方


提示:以下是本篇文章正文内容,下面案例可供参考

一、制作原理

1、2D的动画属性

具体的动画属性参见博主的另一篇文章 ,2D动画属性点这里,你要的全拿走!!!

在这里插入图片描述

2、3D的动画属性

基本属性:

  • 3D位移:translate3d(x,y,z)
  • 3D旋转:rotate3d(x,y,z,deg)
  • 透视:perspective
  • 3D呈现:transfrom-style

三维坐标系:

三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的。
X轴:水平向右(注意:X往右边是正值,往左边是负值)
Y轴:垂直向下(注意:Y往下面是正值,往上面是负值)
Z轴:垂直屏幕(注意:往外面是正值,往里面是负值)

我们看到的电脑屏幕的左上角等同于坐标中心原点,屏幕上边沿是x的正轴,屏幕左边沿是y的正轴。

在这里插入图片描述

二、魔方图片

大家一起用自己喜欢的idol图片做一个酷炫的魔方吧!!!
先来看看静止状态下的效果图,别急,更好看的在下面!!!

效果图(示例):
在这里插入图片描述

三、代码

css代码如下(示例):

body {
			/* 透视写在被观察元素的父盒子上面的 */
            perspective: 3000px;
        }
        
        section {
            position: relative;
            width: 600px;
            height: 600px;
            margin: 500px auto;
            /* 代码写给父级,子元素开启立体空间 */
            transform-style: preserve-3d;
            transition: all 2s;
            animation: rotate 10s linear forwards;
        }
        /* 给每个div设置大小、背景图片和位置 */
        section div:nth-child(1) {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(images/1.jpg);
            transform: translateZ(300px);
        }
        
        section div:nth-child(2) {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(images/2.jpg);
            transform: translateX(300px) rotateY(90deg);
        }
        
        section div:nth-child(3) {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(images/3.jpg);
            transform: translateZ(-300px) rotateY(180deg);
        }
        
        section div:nth-child(4) {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(images/4.jpg);
            transform: translateX(-300px) rotateY(270deg);
        }
        
        section div:nth-child(5) {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(images/5.jpg);
            transform: translateY(-300px) rotateX(90deg);
        }
        
        section div:nth-child(6) {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(images/6.jpg);
            transform: translateY(300px) rotateX(-90deg);
        }
         /* 制作旋转动画 */
        @keyframes rotate {
            0% {}
            25% {
                transform: rotateX(270deg);
            }
            50% {
                transform: rotate3d(-1, -1, 0, 270deg);
            }
            75% {
                transform: rotate3d(1, -1, 0, 180deg);
            }
            100% {
                transform: rotateY(270deg);
            }
        }
        /* 规定鼠标指向魔方的时候规定动画是否正在运行或暂停 默认是running,暂停是paused */
        section:hover {
            animation-play-state: paused;
        }

HTML结构代码如下(示例):

  <section>
  		 <!-- 六个盒子分别装6张背景图片 -->
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>

四、动态魔方效果

效果如下(示例):

在这里插入图片描述

在这里插入图片描述


  • 6
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

super码力

么么哒,夏天来块儿冰西瓜!

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

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

打赏作者

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

抵扣说明:

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

余额充值