CSS3的正方体自动旋转

最新推荐文章于 2022-08-04 04:42:07 发布
最新推荐文章于 2022-08-04 04:42:07 发布
阅读量666 收藏
点赞数
分类专栏： CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenshuangwtt/article/details/43233653
版权 
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        html
        {
            background: -webkit-radial-gradient(center, ellipse, #430d6d 0%, #000000 100%);
            background: radial-gradient(ellipse at center, #430d6d 0%, #000000 100%);
            height: 100%;
        }

        #square{
            width:200px;
            height:200px;
            margin:50px auto;
            margin-top: 200px;
            -webkit-perspective:800;
            -webkit-perspective-orign:50% 50%;
        }
        #con{
            -webkit-transform-style:preserve-3d;
            -webkit-animation:spin 5s linear infinite;
            -webkit-transform-origin:50%;
            position: relative;

        }

        .box{
            position: absolute;
            width:200px;
            height:200px;
            color:white;
            font-size:200px;
            line-height:200px;
            text-align:center;
            border-radius:10px;
        }

        @-webkit-keyframes spin
        {
            from
            {
                -webkit-transform: translateZ(-10em) rotateX(0) rotateY(0deg);
                transform: translateZ(-10em) rotateX(0) rotateY(0deg);
            }

            to
            {
                -webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
                transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
            }
        }

        #box1{background-color: yellow;-webkit-transform:rotateX(90deg) translateZ(100px);}
        #box2{background-color: green;-webkit-transform:rotateY(90deg) translateZ(100px);}
        #box3{background-color: gold;-webkit-transform:translateZ(100px);}
        #box4{background-color: blue;-webkit-transform:rotateY(270deg) translateZ(100px);}
        #box5{background-color: red;-webkit-transform:translateZ(-100px);}
        #box6{background-color: pink;-webkit-transform:rotateX(270deg) translateZ(100px);}
    </style>
</head>
<body>
<div id="square">
    <div id="con">
        <a class="box" id="box1">1</a>
        <a class="box" id="box2">2</a>
        <a class="box" id="box3">3</a>
        <a class="box" id="box4">4</a>
        <a class="box" id="box5">5</a>
        <a class="box" id="box6">6</a>
    </div>
</div>
</body>
</html>


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        html
        {
            background: -webkit-radial-gradient(center, ellipse, #430d6d 0%, #000000 100%);
            background: radial-gradient(ellipse at center, #430d6d 0%, #000000 100%);
            height: 100%;
        }

        .stage
        {
            -webkit-perspective: 1000px;
            width: 20em;
            height: 20em;
            left: 50%;
            top: 50%;
            margin-left: -10em;
            margin-top: -10em;
            position: absolute;
        }

        .cube
        {
            -webkit-animation: 6s spin linear infinite;
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-transform-style: preserve-3d;
            -webkit-transform: rotateX(-20deg) rotateY(-20deg);
        }

        .cube *
        {
            background: -webkit-linear-gradient(left, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px), -webkit-linear-gradient(top, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px);
            -webkit-background-size: 2.5em 2.5em;
            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            width: 100%;
            height: 100%;
            border: 2px solid rgba(54, 226, 248, 0.5);
            -webkit-box-shadow: 0 0 5em rgba(0, 128, 0, 0.4);
        }

        .font
        {
            -webkit-transform: translateZ(10em);
        }

        .back
        {
            -webkit-transform: rotateX(180deg) translateZ(10em);
        }

        .left
        {
            -webkit-transform: rotateY(-90deg) translateZ(10em);
        }

        .right
        {
            -webkit-transform: rotateY(90deg) translateZ(10em);
        }

        .top
        {
            -webkit-transform: rotateX(90deg) translateZ(10em);
        }

        .bottom
        {
            -webkit-transform: rotateX(-90deg) translateZ(10em);
        }

        @-webkit-keyframes spin
        {
            from
            {
                -webkit-transform: translateZ(-10em) rotateX(0) rotateY(0deg);
                transform: translateZ(-10em) rotateX(0) rotateY(0deg);
            }

            to
            {
                -webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
                transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
            }
        }

    </style>
</head>
<body>
<div class="stage">
    <div class="cube">
        <div class="font">1</div>
        <div class="back">2</div>
        <div class="left">3</div>
        <div class="right">4</div>
        <div class="top">5</div>
        <div class="bottom">6</div>
    </div>
</div>
</body>
</html>



在路上_等你
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3自动旋转正方体3D特效
07-28
CSS3自动旋转正方体3D特效是一款基于css3 keyframes属性制作的图片相册自动旋转立方体特效。
CSS应用：径向渐变
宁静致远
05-18 9824
渐变是从一种颜色逐渐蜕变到另一种颜色。径向渐变就是从起点到终点颜色从内到外进行圆形渐变，使用径向渐变可以实现一些漂亮的界面特效。在这里，我将介绍在CSS中怎么实现径向渐变的方法。
08-圆角渐变
茉莉发2233的博客
04-07 870
圆角样式 长时间以来,圆角都是开发者最期盼的效果,很多网页设计的老手都投入几十甚至上百个小时,就是为了通过图片来实现可以可以缩放,同时由兼容各种游览器的圆角效果,现在并不用考虑那么多兼容问题也就ie8及ie8以前和opera mini不支持. 况且圆角也只是锦上添花的效果,并没有对可用性构成实际影响,所以大家使用标准属性即可. 网页的排版,布局内容设置都是矩形,我们圆角只是隐藏了四周的角而已.不...
CSS3 自动旋转
weixin_30580341的博客
10-26 473
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3自动旋转效果</title> <style> .swiper-container{ ...
css制作一个自动旋转的立方体
01-02 626
1.透视/景深效果 左手法则：大拇指指向当前坐标轴的下方向，手指环绕的方向就是正方向 perspective(length) 为一个元素设置三维透视的距离。仅作用于元素的后代，而不是其元素本身。当perspective:none/0;时，相当于没有设perspective(length)。比如你要建立一个小立方体，长宽高都是200px。如果你的perspective < 200px ，...
css3实现正方体和旋转效果
rufeike的博客
10-22 3590
css3实现正方体和旋转效果 实现效果图 涉及知识点 3D移动 方法：translate3d(x,y,z) 单独设置：translateX(length)，translateY(length)，translateZ(length) 3D旋转 方法：rotate3d(x,y,z,angle) 3D动画结果保留设置 transform-style:preserve-3d;子元素将保留其3d位置 -...
纯CSS3绘制正方体旋转动画特效
06-24
纯CSS3绘制正方体旋转动画特效是一款3D立体效果不错的正方形旋转动画特效下载。
CSS3正方体3D旋转动画特效
06-11
这是一款纯CSS3绘制的3D立体正方形旋转动画效果，多个CSS3正方体同时旋转动画特效。
CSS3 做一个旋转的立体3D正方形 动效核心【前端就业课 第二阶段】CSS 零基础到实战（07）
1_bit 的博客
08-04 2427
若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我，若你是真心学习可以送你书籍，指导你学习，给予你目标方向的学习路线，无套路，博客为证。transform-origin 用于更改当前元素的中心点，使元素在根据中心点做一些动效使做出更多的姿态。transform-origin 表示当前元素的基点，使用 transform-origin 可以对目标元素的基点进行设置，在 3D 效果中，transform-origin 可以灵活运用制作出非常舒服的动态效果，给你的页面增加不少的分数。以下是一个基础的 trans
html圆点光晕特效,css+html 实现 光晕 光圈
weixin_35983453的博客
06-01 609
html {height: 100%;}body {height: 100%;background-color: #000;margin: 0;padding: 0;}.lensflare {position: relative;overflow: hidden;width: 100%;min-height: 100%;overflow: hidden;}.source-spread {posit...
html5 3D旋转立方体
07-19
使用html5+css3+jquery组合，一个可以通过按键控制立方体旋转的demo，具有3D效果。
一个CSS3实现的旋转动画效果.rar
07-10
一个CSS3实现的旋转动画效果，打开网页后，可看到一些圆环嵌套在一起，循环旋转效果，基于HTML5的CSS3动画技术渲染，对您学习CSS3技术或许会有不小的帮助。
html css动画自动旋转,不炫技，SVG+CSS3 旋转动画属性就能实现的梦幻效果
weixin_34005090的博客
05-30 953
CSS3的动画相关的基础的属性基本都涉猎过了，个人认为，其中最复杂的是d:path()路径变形动画，超过3D，而位移、轨迹、旋转、缩放、斜切什么的，相对简单一些，但作为非动画设计师而言，灵活的掌握这些基本的动画加以无穷无尽的变换，就已经能做出很多华丽丽的效果了，这篇呢，源于做一个练习时，AI的连续旋转复制功能，试着做了几个动效，简单、省时、高效，最主要的是用到CSS3的transform:rota...
html中怎么让字母旋转,css3如何设置元素不停旋转？
weixin_42513616的博客
05-30 483
我们在进行网页页面设计时，经常会遇到各种关于图片展示的问题，比如有的需要让图片圆角展示、图片点击放大展示等等效果。本篇文章将要给大家详细介绍如何使用css3让图片实现不停旋转的效果。主要就给大家介绍用css3实现图片自动循环360旋转的具体方法css可以使用transform 属性设置元素进行旋转、缩放、移动或倾斜。我们可以使用css样式transform:rotate(360deg)设置元素旋转...
CSS3渐变属性：线性渐变和径向渐变用法教程
178技术
10-06 3517
在CSS3之前如果需要添加渐变效果，通常要设置背景图像来实现。而CSS3中增加了渐变属性，通过渐变属性可以轻松实现渐变效果。CSS3的渐变属性主要包括线性渐变和径向渐变，本文转自黑马程序员前端培训课程，下面我们详细介绍。 CSS3线性渐变 在线性渐变过程中，起始颜色会沿着一条直线按顺序过渡到结束颜色。运用CSS3中的“background-image: linear-gradient（参数值）;”样式可以实现线性渐变效果，其基本语法格式如下。 background-image: linear-gra
css3 正方体无限旋转
Asuria
06-05 1068
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
111CSS3效果：旋转的正方体
weixin_30737363的博客
06-03 156
实现思路：（1）把6个正方形通过定位叠放在一起；（2）1个不动，4个旋转90度与前者垂直，形成1个无盖盒子，最后1个通过平移作为盒盖！（3）添加CSS3动画，实现旋转。```html:run<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>旋...
css3实现无限旋转360度
热门推荐
dreamcarp的专栏
07-12 1万+
工作中遇到需要无限旋转360度的loading圈，亲测下面css样式可用。 @-webkit-keyframes animal { 0%{ transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); } 100%{ transfor
UPS、蓄电池、空开、电缆配置计算方法.pptx
最新发布
04-27
5G通信行业、网络优化、通信工程建设资料
css3d旋转正方体
09-23
CSS3D旋转正方体可以通过使用CSS的transform属性来实现。使用rotate3d函数可以指定旋转轴和旋转角度。在给定的示例中，使用了一个名为box1的div元素，并在:hover时应用了旋转效果。 具体过程如下： 1. 创建一个包含...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值