参考：https://www.cnblogs.com/zhangnan35/p/10709876.html

　　　https://www.cnblogs.com/zyrblog/p/11142624.html

translate三维坐标图：

rotate判断：

　　正向轴对着眼睛，顺时针则旋转角度为正，逆时针则旋转角度为负。

　　或者用左手法则也行：伸出左手，大拇指指向正轴方向，四个手指的指向即是旋转正向，但务必记住是左手！

注：rotate后三维坐标轴也会跟着改变

例——正方体相册

效果：

html:

<!DOCTYPE html>

<html>

    <head lang="en">

        <meta charset="UTF-8">

        <link type="text/css" href="css/1.css" rel="stylesheet ">

        <title>旋转立方体相册</title>

    </head>

    <body>

        <div id="react">

            <div class="out_front">

                <img src="img/1.jpg" class="out_pic">

            </div>

            <div class="out_back">

                <img src="img/2.jpg" class="out_pic">

            </div>

            <div class="out_left">

                <img src="img/3.jpg" class="out_pic">

            </div>

            <div class="out_right">

                <img src="img/4.jpg" class="out_pic">

            </div>

            <div class="out_top">

                <img src="img/5.jpg" class="out_pic">

            </div>

            <div class="out_bottom">

                <img src="img/1.jpg" class="out_pic">

            </div>

            <span class="in_front">

                <img src="img/2.jpg" class="in_pic">

            </span>

            <span class="in_back">

                <img src="img/3.jpg" class="in_pic">

            </span>

            <span class="in_left">

                <img src="img/4.jpg" class="in_pic">

            </span>

            <span class="in_right">

                <img src="img/5.jpg" class="in_pic">

            </span>

            <span class="in_top">

                <img src="img/1.jpg" class="in_pic">

            </span>

            <span class="in_bottom">

                <img src="img/2.jpg" class="in_pic">

            </span>

        </div>

    </body>

</html>

1.css:

* {

    padding: 0;

    margin: 0;

}

body {

    width: 100%;

    height: 100%;

    perspective: 500px;//元素被查看位置的视图,值越大，代表“眼睛离观察物越远”，值越小，代表“眼睛越靠近观察物”

    background: linear-gradient(darkred 0%, black 100%);

}

#react {

    width: 200px;

    height: 200px;

    margin: 200px auto;

    transform-style: preserve-3d;//支持3d图像显示

    animation: rotate 20s infinite;

    animation-timing-function: linear;

}

#react div {

    position: absolute;

    transition: all .4s;

}

div .out_pic {

    width: 200px;

    height: 200px;

    opacity: 0.9;

}

div .in_pic {

    width: 100px;

    height: 100px;

}

#react span {

    display: block;

    position: absolute;

    width: 100px;

    height: 100px;

    top: 50px;

    left: 50px;

}

@keyframes rotate {

    from {

        transform: rotateX(0deg) rotateY(0deg);

    }

    to {

        transform: rotateX(360deg) rotateY(360deg);

    }

}

.out_front {

    transform: translateZ(100px);

}

.out_back {

    transform: translateZ(-100px);

}

.out_left {

    transform: rotateY(90deg) translateZ(100px);

}

.out_right {

    transform: rotateY(-90deg) translateZ(100px);

}

.out_top {

    transform: rotateX(90deg) translateZ(100px);

}

.out_bottom {

    transform: rotateX(-90deg) translateZ(100px);

}

.in_front {

    transform: translateZ(50px);

}

.in_back {

    transform: translateZ(-50px);

}

.in_left {

    transform: rotateY(90deg) translateZ(50px);

}

.in_right {

    transform: rotateY(-90deg) translateZ(50px);

}

.in_top {

    transform: rotateX(90deg) translateZ(50px);

}

.in_bottom {

    transform: rotateX(-90deg) translateZ(50px);

}

/*外面的图片散开*/

#react:hover .out_front {

    transform: translateZ(200px);

}

#react:hover .out_back {

    transform: translateZ(-200px);

}

#react:hover .out_left {

    transform: rotateY(90deg) translateZ(200px);

}

#react:hover .out_right {

    transform: rotateY(-90deg) translateZ(200px);

}

#react:hover .out_top {

    transform: rotateX(90deg) translateZ(200px);

}

#react:hover .out_bottom {

    transform: rotateX(-90deg) translateZ(200px);

}

/*里面的图片散开*/

#react:hover .in_front {

    transform: translateZ(100px);

}

#react:hover .in_back {

    transform: translateZ(-100px);

}

#react:hover .in_left {

    transform: rotateY(90deg) translateZ(100px);

}

#react:hover .in_right {

    transform: rotateY(-90deg) translateZ(100px);

}

#react:hover .in_top {

    transform: rotateX(90deg) translateZ(100px);

}

#react:hover .in_bottom {

    transform: rotateX(-90deg) translateZ(100px);

}

css translate/rotate 空间坐标轴的更多相关文章

  1. HTML5 Canvas ( 图形变换, 升级版的星空 ) translate, rotate, scale

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. iOS 2D绘图详解（Quartz 2D）之Transform(CTM,Translate,Rotate,Scale)

    前言:Quartz默认采用设备无关的user space来进行绘图,当context(画板)建立之后,默认的坐标系原点以及方向也就确认了,可以通过CTM(current transformation ...

  3. CSS学习笔记2-2d变换和过渡属性

    前言:今天又是一个周末,心情不错,趁着闲暇之余,把剩下来的CSS3学习的内容全部整理出来,练习用的源码也稍微整理了一下. 2D转换 transform:translate||rotate||scale ...

  4. css属性的选择对动画性能的影响

    现在手机的占比越来越高,各种酷炫页面层出不穷,这些特效都离不开css动画.说到css动画,主流的情况也就无非这两大类:位移和形变.而我们在写一个动画特效的过程中,如何去提升它的性能呢?当然首先我们需要 ...

  5. canvas/CSS实现仪表盘效果

    手机上看比较虚 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  6. CSS 实现加载动画之一-菊花旋转

    最近打算整理几个动画样式,最常见的就是我们用到的加载动画.加载动画的效果处理的好,会给页面带来画龙点睛的作用,而使用户愿意去等待.而页面中最常用的做法是把动画做成gif格式,当做背景图或是img标签来 ...

  7. css知识总结

    ---# 学习目标:> 1. 学会使用CSS选择器> 2. 熟记CSS样式和外观属性> 3. 熟练掌握CSS各种选择器> 4. 熟练掌握CSS各种选择器> 5. 熟练掌握 ...

  8. 前端性能优化（css动画篇）

    正巧看到在送书,于是乎找了找自己博客上记录过的一些东西来及其无耻的蹭书了~~~ 小广告:更多内容可以看我的博客 最近拜读了一下html5rocks上几位大神写的一篇关于CSS3动画性能优化的文章,学到 ...

  9. canvas/CSS仪表盘效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. __name__ 与 __main__解读

    在python脚本中我们经常看到如下的代码: # hello.py def hello(): print("hello world!") def test(): hello() i ...

  2. python调用tushare获取沪深A股票资金流向数据

    接口:moneyflow 描述:获取沪深A股票资金流向数据,分析大单小单成交情况,用于判别资金动向 限量:单次最大提取4000行记录,总量不限制 积分:用户需要至少1500积分才可以调取,基础积分有流 ...

  3. 关于Oracle中Sort Merge Join的改写

    业务场景的问题,我们有一个刷CUBE的SQL,是Oracle环境,平时跑70多分钟, 但是最近突然不动了,这个SQL需要算累计值,比如年累计客户数量. 累计值是什么意思呢?我们使用下面的数据来说明问题 ...

  4. ASP.NET MVC 学习笔记之View 和Redriect的区别

    首先先说一下Redriect 和RedirectToAction 两个没什么区别,都是向浏览器发送302 Found相应,再有浏览器向对应的url进行请求 只是参数的意义不同而已 再说Redirect ...

  5. Activiti学习笔记3 — 流程定义

    一.创建流程引擎对象 private ProcessEngine processEngine = ProcessEngines.getDefaultProcessEngine(); 二.发布一个流程 ...

  6. 2019-8-31-gif-格式

    title author date CreateTime categories gif 格式 lindexi 2019-08-31 16:55:59 +0800 2018-2-13 17:23:3 + ...

  7. MySQL索引与事务

    MySQL索引与事务 链接:https://pan.baidu.com/s/1ANGg3Kd_28BzQrA5ya17fQ 提取码:ekpy 复制这段内容后打开百度网盘手机App,操作更方便哦 1.索 ...

  8. JAXB读写xml

    一.注解 在Java模型中的创建与 xml 文件对应的节点和属性需要用注解来表示 @XmlRootElement 作用:将一个Java类映射为一段XML的根节点参数:    name  定义这个根节点 ...

  9. 【Javascript DOM读书笔记】chapter8 充实文档内容

    本章目的 作者举出了第一个实例,为一篇 web 页面动态创建缩略语(abbreviation)的列表.大家知道,我们可以使用 <abbr>...</abbr> 来指示一个缩略语 ...

  10. icomoon字体图标引用代码

    1.第一步在样式里声明字体:告诉别人我们自己定义的字体. @font-face{ /*声明字体 引用字体*/ font-family:'icomoon'; src:url('fonts/icomoon ...