参考: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. linux中常用的命令大全

    系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS ...

  2. 前端面试题,js预处理部分小结,函数声明提升和变量声明提升

    博客搬迁,给你带来的不便,敬请谅解! http://www.suanliutudousi.com/2017/11/25/%e5%89%8d%e7%ab%af%e9%9d%a2%e8%af%95%e9% ...

  3. FrameWork内核解析之Handler消息机制(二)

    阿里P7Android高级架构进阶视频(内含Handler视频讲解)免费学习请点击:https://space.bilibili.com/474380680 一.Handler 在Android开发的 ...

  4. rookit入門

    来源:rootkit_com 作者:Clandestiny 翻译:fqh “Help!我是一名新手!我需要一款rootkit入侵朋友的机器…我想编写自己的rootkit…我想开始开发代码… 该从哪里入 ...

  5. Python之lambda && reduce

    lambda类似于C里面的#define或者C++里面的内联函数(inline),一般都小巧精悍 >>> g=lambda x,y:x*y >>> g(3,7) 2 ...

  6. Linux下svn更新含有中文名称的库无法更新问题

    Linux下更新含有中文名称的库文件时,出现如下提示: SVN Error: Can't convert string from native encoding to 'UTF-8' 通过google ...

  7. BUUCTF MISC ZIP

    这道题有点烦,拿出来单独写先贴两张图,一会用 首先这题给了68个压缩包,每个压缩包里只有4bytes大小,于是可以想到是crc爆破,自己写的脚本总是被killed,犯懒找了个脚本 import zip ...

  8. NOPI Excel 数据导入到数据库

    /// <summary> /// 上传excel文件 并将文件数据导入到数据库 /// </summary> /// <param name="file&qu ...

  9. systemd-tmpfiles - Operation not permitted chown ; systemd-modules-load.service

    systemd-tmpfiles-setup.service  fail  一般为 /exports/rfs/var/lib/systemd/ 下的文件属性问题 , chown -R   root:r ...

  10. 【Luogu】【关卡2-2】交叉模拟(2017年10月)

    任务说明:这里也是模拟,但是会混有些别的部分.思维难度不大,但是编写起来会有些难度.