专栏首页前端之攻略CSS3 3D旋转立方体 原

CSS3 3D旋转立方体 原

主要用到动画css3  animation,特别注意当完成正方体的过程中,每个面旋转时这个面的坐标系是跟着变换的,只是他们的相对位置不变,默认的变换基点是(50% 50% 0),我们可以使用transform-origin改变默认基点,也可以按默认的基点来变换,关于rotateX或者rotateY旋转角度的正负区分,是视线在x轴或者Y轴的+方向向负方向看,如果是顺时针则角度为正值,逆时针为负值,下面是按默认基点实现立方体的。

<div class="my3dspace">
 	<div id="cubepages">
 		<div class="page" id="font">1</div>
 		<div class="page" id="back">2</div>
 		<div class="page" id="upper">3</div>
 		<div class="page" id="bottom">4</div>
 		<div class="page" id="left">5</div>
 		<div class="page" id="right">6</div>
 	</div>
 </div>
.my3dspace{margin-top:100px;-webkit-perspective:800;}
#cubepages{width:200px;height:200px;margin:0 auto;-webkit-transform-style:preserve-3d;position:relative;-webkit-animation:rotate 20s infinite;}
.page{position:absolute;width:160px;height:160px;padding:20px;box-sizing:content-box;font-size:100px;text-align:center;line-height:170px;background:#333;color:#fff;-webkit-transition: -webkit-transform 1s linear;}
#font {
    transform: rotateY(0) translateZ(100px);background:#09c45d;
}

#back {
    transform: translateZ(-100px) rotateY(180deg) ;background:#01bb43;
}

#left {
    transform: rotateY(-90deg) translateZ(100px);background:#dd74f7;
}

#right {
    transform: rotateY(90deg) translateZ(100px);background:#eb12c0;
}

#upper {
    transform: rotateX(90deg) translateZ(100px);background:#03cae2;
}

#bottom {
    transform: rotateX(90deg) translateZ(-100px);background:#11aafa;
}
@-webkit-keyframes rotate {
  from {
    transfrom:rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  to{
    transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }


}

另一个可以拖动的例子

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>立方体特效</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        background: #ccc;
    }

    .stage {
        perspective: 800;
        perspective-origin: 50% 50%;
    }

    .cube {
        position: relative;
        width: 200px;
        height: 200px;
        margin: 100px auto;
        background: #ccc;
        transform-style: preserve-3d;
        transform: rotateX(-20deg) rotateY(50deg);
    }

    .cube .face {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-size: cover;
        box-shadow: 0 0 100px #5fbcff;
    }

    .front {
        background: url(images/a5.png);
        transform: translateZ(100PX);
    }

    .back {
        background: url(images/a1.png);
        transform: translateZ(-100px);
    }
    /*.left{background:url(images/a2.png);transform:translateX(-100PX) rotateY(-90deg)} 也可以写成下面的写法,旋转角度后坐标系统也发生了变化*/

    .left {
        background: url(images/a2.png);
        transform: rotateY(-90deg) translateZ(100PX)
    }
    /*.left{background:url(images/a2.png);transform:translateX(-100PX) rotateY(-90deg)} 围绕y轴旋转,图形右侧向里为正,图形右侧向外为负*/

    .right {
        background: url(images/a2.png);
        transform: translateX(100PX) rotateY(90deg)
    }

    .up {
        background: url(images/a3.png);
        transform: translateY(-100PX) rotateX(90deg)
    }

    .down {
        background: url(images/a3.png);
        transform: rotateX(-90deg) translateZ(100px)
    }
    </style>
    <script>
    window.onload = function() {
        var box = document.querySelector("#box")
        var y = 50
        var x = 20
        box.onmousedown = function(ev) {
            var oEvent = ev || event;
            var disX = oEvent.clientX - y
            var disY = oEvent.clientY - x
            document.onmousemove = function(ev) {
                var oEvent = ev || event;
                x = oEvent.clientY - disY
                y = oEvent.clientX - disX
                box.style.transform = "rotateX(" + x + "deg) rotateY(" + y + "deg)"
            };
            document.onmouseup = function() {
                document.onmousemove = null
                document.onmouseup = null
            };
            return false
        }

    }
    </script>
</head>

<body>
    <div class="stage">
        <div class="cube" id="box">
            <div class="front face">front</div>
            <div class="back face">back</div>
            <div class="up face">up</div>
            <div class="down face">down</div>
            <div class="left face">left</div>
            <div class="right face">right</div>
        </div>
    </div>
</body>

</html>

里面用到的

background-sizecover保持图像的纵横比并将图像拉长或缩放成将完全覆盖背景定位区域的最小大小。

background-size:contain 意思会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

相同点:图片都是等比例缩放

不同点:cover是铺满整个显示区域。如果显示比例和显示区域的比例相差很大某些部分会不显示

contain:正好相反,他是按照某一边来覆盖显示区域的,会有白边

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue.js-Class与Style绑定 原

    (adsbygoogle = window.adsbygoogle || []).push({});

    tianyawhl
  • Vue.js-条件渲染 原

    在<template>中配合v-if条件渲染一整组 因为v-if是一个指令,需要将它添加到一个元素上,但是如果我们想切换多个元素,此时我们可以把一个<temp...

    tianyawhl
  • 水平滚动条

    主要用到并排Div 的父级设置white-space: nowrap,并排的div设置display:inline-block;

    tianyawhl
  • 3d魔方动画

    河湾欢儿
  • html+css学习笔记017-H5新背景属性0颜色0倒影0遮罩

    Mr. 柳上原
  • 为什么DB连接管理一般不采用IO多路复用?

    大宽宽
  • GoCN每日新闻(2019-09-27)

    1. Golang新版本发布:Go 1.13.1和Go 1.12.10 https://golang.org/dl/

    landv
  • SpringMVC处理multipart请求.

    一、简述     multipart格式的数据会将一个表单拆分为多个部分(part),每个部分对应一个输入域。在一般的表单输入域中,它所对应的部分中会放置文本型...

    JMCui
  • 关于元素间的边距重叠问题与BFC

    BFC(Block Formatting Context),即块级格式化上下文,创建了 BFC 的元素是一个独立的容器,里面无论如何布局都不会影响到外面的元素

    Leophen
  • Flutter环境搭建

    这几年,移动跨平台的趋势可以说是越来越明显,技术实现上也是百花争艳,不过究其实现,无外乎有那么几种。 Web 流:也被称为 Hybrid 技术,它基于 Web ...

    xiangzhihong

扫码关注云+社区

领取腾讯云代金券