css translate/rotate 空间坐标轴
参考: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 空间坐标轴的更多相关文章
- HTML5 Canvas ( 图形变换, 升级版的星空 ) translate, rotate, scale
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- iOS 2D绘图详解(Quartz 2D)之Transform(CTM,Translate,Rotate,Scale)
前言:Quartz默认采用设备无关的user space来进行绘图,当context(画板)建立之后,默认的坐标系原点以及方向也就确认了,可以通过CTM(current transformation ...
- CSS学习笔记2-2d变换和过渡属性
前言:今天又是一个周末,心情不错,趁着闲暇之余,把剩下来的CSS3学习的内容全部整理出来,练习用的源码也稍微整理了一下. 2D转换 transform:translate||rotate||scale ...
- css属性的选择对动画性能的影响
现在手机的占比越来越高,各种酷炫页面层出不穷,这些特效都离不开css动画.说到css动画,主流的情况也就无非这两大类:位移和形变.而我们在写一个动画特效的过程中,如何去提升它的性能呢?当然首先我们需要 ...
- canvas/CSS实现仪表盘效果
手机上看比较虚 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
- CSS 实现加载动画之一-菊花旋转
最近打算整理几个动画样式,最常见的就是我们用到的加载动画.加载动画的效果处理的好,会给页面带来画龙点睛的作用,而使用户愿意去等待.而页面中最常用的做法是把动画做成gif格式,当做背景图或是img标签来 ...
- css知识总结
---# 学习目标:> 1. 学会使用CSS选择器> 2. 熟记CSS样式和外观属性> 3. 熟练掌握CSS各种选择器> 4. 熟练掌握CSS各种选择器> 5. 熟练掌握 ...
- 前端性能优化(css动画篇)
正巧看到在送书,于是乎找了找自己博客上记录过的一些东西来及其无耻的蹭书了~~~ 小广告:更多内容可以看我的博客 最近拜读了一下html5rocks上几位大神写的一篇关于CSS3动画性能优化的文章,学到 ...
- canvas/CSS仪表盘效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- rem 布局代码
根据设计稿的高度,除以相对应的数字 <script type="text/javascript"> // 把尺寸放大N倍(N是window.devicePixelRat ...
- CSS 中功能相似伪类间的区别
导读: CSS3 中有许多伪类选择器,其中一些伪类选择器的作用近似却又不完全一样,下面我们就来看一看到底有什么不一样. 1.:only-child 与 :only-of-type 测试的代码: < ...
- 截取url参数
//获得参数(只对字母数字等有效,参数值为中文则不能传) function getQueryString(name) { var reg = new RegExp("(^|&)&qu ...
- ArcGis 创建含孔洞面要素AO C#
IGeometryCollection geometryCollection = new PolygonClass(); IPointCollection pointCollection_Exteri ...
- 算法竞赛模板 KMP
KMP算法图解: ① 首先,字符串“BBC ABCDAB ABCDABCDABDE”的第一个字符与搜索词“ABCDABD”的第一个字符,进行比较.因为B与A不匹配,所以搜索词后移一位. ② 因为B与A ...
- 如何取消IDEA的自动删除行尾空格?
使用IDEA,添加注释的时候敲空格,总是会把行尾空格删除导致代码跑到注释行,很不爽~~ 取消这个不爽的功能:File--Settings--Editor--General--Other--Strip ...
- Spring事务管理-传播行为-隔离级别
事务是逻辑上的一组操作,这组操作要么全部成功,要么全部失败. 事务的特性:ACID 原子性:事务是一个不可分割的工作单位,事务中的操作要么都发生,要么都不发生 一致性:事务前后数据的完整性约束保持一致 ...
- 57. Collections(list的工具类)、Arrays(数组的工具类)
List集合的工具类(Collections): 注意:Collection是单列集合的根接口 Collections是操作集合对象的工具类 1.对list集合排序: sort(List) 根据自然 ...
- Spring注解详解(转)
概述 注释配置相对于 XML 配置具有很多的优势: 它可以充分利用 Java 的反射机制获取类结构信息,这些信息可以有效减少配置的工作.如使用 JPA 注释配置 ORM 映射时,我们就不需要指定 PO ...
- FTP的PORT和PASV的连接方式以及数据连接端口号计算
FTP的PORT和PASV的连接方式以及数据连接端口号计算 PORT(自动)方法的连接途中是: 客户端向服务器的FTP端口(原始是21)发送连接请求,服务器领受连接,建立一条command链路. ...