CSS知识回顾（10）

知识回顾

CSS3思维导图
3D转换
- 透视perspective
- 3D旋转
CSS移动端
background
特殊样式

来源博客：u.mr90.top

CSS3思维导图

3D转换

x右面为正，左边为负
y下面为正，上面为负
z外面为正，里面为负
transform:translate3d(x,y,z),且xyz都不能省略

透视perspective

透视（视距）写到被观察元素的父盒子上

3D旋转

可以沿着xyz分别旋转，加透视效果更明显
使用左手定则判断方向
transform:rotate3d(x,y,z,ndeg)
3d呈现transform-style:flat/preserve-3d,代码写给父级，影响的时子盒子
有3d翻转效果和旋转木马效果

* {padding: 0;margin: 0;
}body {-webkit-transform: translate3d(0, 0, 0) ;transform: translate3d(0, 0, 0);/* perspective:1200px; */}.box {position: relative;width: 200px;height: 200px;margin: 100px auto;transform-style: preserve-3d;transition: all 2s;
}.box:hover {transform: rotateY(-180deg);
}/* .box:hover .back {transform: rotateY(180deg);
}  */.front,.back {border-radius: 50%;position: absolute;top: 0;left: 0;width: 100%;height: 100%;font-size: 40px;text-align: center;line-height: 200px;
}.front {background-color: #9b6ab5;z-index: 1;
}.back {background-color: #ce485c;transform: rotateY(180deg);
}.box2 {position: relative;height: 35px;width: 100px;margin: 100px auto;transform-style: preserve-3d;transition: all .6s;
}
.box2:hover{transform: rotateX(90deg);
}.box2 ul li {list-style: none;height: 35px;width: 100px;
}.b1, .b2 {position: absolute;height: 100%;width: 100%;top: 0;left: 0;border-radius: 6px;text-align: center;line-height: 35px;
}.b1 {background-color: #5757ff;z-index: 1;transform: translateZ(17.5px);
}.b2 {background-color: #268354;transform:translateY(17.5px) rotateX(-90deg);
}section{width: 156px;height: 502px;position: relative;margin: 50px auto;transform-style: preserve-3d;animation: rotate 5s linear infinite;
}
@keyframes rotate{0%{transform: rotateY(0);}100%{transform: rotateY(360deg);}
}
section img{position: absolute;display: block;margin: 0 auto;width: 100%;top: 0;left: 0;
}
section img:nth-child(1){transform: translateZ(300px);
}
section img:nth-child(2){transform: rotateY(60deg)translateZ(300px) ;
}
section img:nth-child(3){transform:rotateY(120deg) translateZ(300px) ;
}
section img:nth-child(4){transform:rotateY(180deg) translateZ(300px)  ;
}
section img:nth-child(5){transform: rotateY(240deg) translateZ(300px);
}
section img:nth-child(6){transform:rotateY(300deg) translateZ(300px);
}

CSS移动端

meta视口标签
neme="viewport" content="width=device-width,user-scalable=no,initial-scale=1"

background

bgs可以跟像素单位或百分比，
background-size:cover/contain（等比拉伸）

特殊样式

盒子模型box-sizing;border-box,-webkit-box-sizing:border-box
点击高亮清除-webkit-tap-highlight-color:transparent
清除移动端ios按钮样式-webkit-appearance:none
禁用长按页面时的弹出菜单img,a{-webkit-touch-callout;none}

CSS知识回顾（10）相关推荐

html css 知识回顾2
在学习代码期间,练习代码是必不可少的内容,同样的对知识点的回顾也是更加重要的,在练代码的同时回顾知识点效果会更好.(知识会有重复的,我遵循的是不论是什么时候的知识都会从头来一遍,对于新掌握的我会再单独 ...
java知识回顾_Java7 –回顾
java知识回顾我开始写博客文章,介绍即将发布的Java8版本中的新增功能 ,并认为我将从快速回顾一下Java7带给我们的内容开始. Java7于2011年7月发布,被描述为"更具进化性而 ...
你需掌握的CSS知识都在这了（长文建议收藏，文末有福利）
1.CSS盒模型,在不同浏览器的差异 css 标准盒子模型 css盒子模型又称为框模型(Box Model),包含了元素内容(content).内边距(padding).边框(border).外边距 ...
html类选择器使用在什么场景,你需掌握的CSS知识都在这了（长文建议收藏，文末有福利）...
1.CSS盒模型,在不同浏览器的差异 css 标准盒子模型 css盒子模型又称为框模型(Box Model),包含了元素内容(content).内边距(padding).边框(border).外边距 ...
css 商城两列_你需掌握的CSS知识都在这了（长文建议收藏，文末有福利）
1.CSS盒模型,在不同浏览器的差异 css 标准盒子模型 css盒子模型又称为框模型(Box Model),包含了元素内容(content).内边距(padding).边框(border).外边距 ...
天星数科首页CSS布局回顾
天星数科首页CSS布局回顾主要使用的CSS技术吸顶定位两端对齐绝对定位相对定位固定定位弹性布局背景定位高级选择器实现效果吸顶定位使用吸顶定位将header 标签固定在页面的顶部 ...
Linux基础入门篇知识回顾
Linux基础入门篇知识回顾一.回顾书籍二.基础知识 1.计算机基础知识 1.1计算机的特点及发展趋势 ①特点 ②发展趋势 1.2计算机系统组成 ①计算机硬件概念 ②计算机硬件各部分功能 ![在这 ...
操作系统笔记1：知识回顾和操作系统概述
知识回顾冯·诺依曼体系结构只用北桥的话性能好,但需要集成封装,可扩展性差,且北桥造价高. 只用南桥的话可扩展性好,造价更低,但是性能不够好. 北桥更新换代更快. 智能手机也符合冯·诺依曼体系结构. ...
html css知识大全
转载自:http://www.3fwork.com/b400/001260MYM001031/ 三沣开发知识购物网址游戏小说股票美女租车短信新闻笑话 | 开发下载软件图书馆 ...

CSS知识回顾（10）

知识回顾

CSS3思维导图

3D转换

透视perspective

3D旋转

CSS移动端

background

特殊样式

CSS知识回顾（10）相关推荐

最新文章

热门文章