4 2D转换
转换(transform)
是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果
- 移动:translate
- 旋转:rotate
- 缩放:scale
4.1 二维坐标系
2D转换是改变标签在二维平面上的位置和形状的一种技术
4.2 2D转换之移动translate
2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位
。
- 语法
transform: translate(x,y); 或者分开写
transform: translateX(n);
transform: translateY(n);
- 重点
- 定义2D转换中的移动,沿着X和Y轴移动元素
- translate最大的优点:不会影响到其他元素的位置
- translate中的百分比单位是相对于自身元素的translate:(50%,50%);
- 对行内标签没有效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 移动盒子的位置: 定位 盒子的外边距 2D转换移动 */
div {
width: 200px;
height: 200px;
background-color: pink;
/* x就是x轴上移动位置 y就是y轴上移动位置 中间用逗号分隔*/
/* transform: translate(x, y); */
/* transform: translate(100px, 100px); */
/* 1. 如果只移动x坐标 */
/* transform: translate(100px, 0); */
/* transform: translateX(100px); */
}
div:first-child {
transform: translate(30px, 30px);
}
div:last-child {
background-color: purple;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
eg:让盒子实现水平和垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
position: relative;
width: 500px;
height: 500px;
background-color: pink;
/* 1. translate里面的参数可以是用% */
/* 2. 如果里面的参数是% 移动的距离是 盒子自身的宽度或者高度来对比的 */
/* 这里的50%就是50px 因为盒子的宽度是100px */
/* transform: translateX(50%); */
}
p {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
background-color: purple;
/* margin-top: -100px; */
/* margin-left: -100px; */
transform: translate(-50%, -50%);
}
span {
/* translate对行内元素是无效的 */
transform: translate(300px, 300px);
}
</style>
</head>
<body>
<div>
<p></p>
</div>
<span>123</span>
</body>
</html>
4.3 2D转换之旋转 rotate
2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转
- 语法
transform:rotate(度数)
- 重点
- rotate里面跟度数,单位是deg比如rotate(45deg)
- 角度为正时,顺时针,负时,为逆时针
- 默认旋转的中心点是元素的中心点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
width: 150px;
/* 顺时针旋转45度 */
/* transform: rotate(45deg); */
border-radius: 50%;
border: 5px solid pink;
/* 过渡写到本身上,谁做动画给谁加 */
transition: all 0.3s;
}
img:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="media/pic.jpg" alt="">
</body>
</html>
三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
position: relative;
width: 249px;
height: 35px;
border: 1px solid #000;
}
div::after {
content: "";
position: absolute;
top: 8px;
right: 15px;
width: 10px;
height: 10px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
transform: rotate(45deg);
transition: all 0.2s;
}
/* 鼠标经过div 里面的三角旋转 */
div:hover::after {
transform: rotate(225deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
4.4 2D转换中心点transform-origin
可以设置元素转换的中心点
- 语法
transform-origin: x y;
- 重点
- 注意后面的参数x和y用空格隔开
- x y默认转换的中心点是元素的中心点(50% 50%)
- 还可以给x y 设置像素或者方位名词(top bottom left right center)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all 1s;
/* 1. 可以跟方位名词 */
/* transform-origin: left bottom; */
/* 2. 默认的是50% 50% 等价于center center*/
/* 3. 可以是px像素 */
transform-origin: 50px 50px;
}
div:hover {
transform: rotate(360deg)
}
</style>
</head>
<body>
<div></div>
</body>
</html>
旋转案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
overflow: hidden;
width: 200px;
height: 200px;
border: 1px solid pink;
margin: 10px;
float: left;
}
div::before {
content: "黑马";
display: block;
width: 100%;
height: 100%;
background-color: hotpink;
transform: rotate(180deg);
transform-origin: left bottom;
transition: all 0.4s;
}
/* 鼠标经过div里面的before 复原 */
div:hover::before {
transform: rotate(0deg);
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
4.5 2D转换之缩放scale
缩放,顾名思义.可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。
- 语法
transform: scale(x,y);
- 注意
- 注意其中的x和y用逗号分隔
- transform:scale(1,1): 宽和高都放大一倍,相对于没有放大
- transform:scale(2,2): 宽和高都放大了2倍
- transform:scale(2): 只写一个参数,第二个参数则和第一个参数一样,相当于scale(2,2)
- transform:scale(0.5,0.5) :缩小
- scale缩放最大的优势:可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transform-origin: left bottom;
}
div:hover {
/* 1. 里面写的是数字 不跟单位 就是倍数的意思 1就是1倍 2就是2倍*/
/* transform: scale(x, y); */
/* transform: scale(2, 2); */
/* 2. 修改了宽度为原来的2倍 高度不变*/
/* transform: scale(2, 1); */
/* 3. 等比例缩放 同时修改宽度和高度 有简单的写法 以下是宽度修改了2倍 高度默认和第一个参数一样 */
/* transform: scale(2); */
/* 4. 可以进行缩小 小于1就是缩放 */
/* transform: scale(0.5, 0.5); */
/* transform: scale(0.5); */
/* 5. scale 的优势之处: 不会影响其他的盒子 而且可以设置缩放的中心点 */
/* width: 300px;
height: 300px; */
transform: scale(2);
}
</style>
</head>
<body>
<div></div>
1234
</body>
</html>
图片放大案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
overflow: hidden;
float: left;
margin: 10px;
}
div img {
transition: all 0.3s;
}
div img:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<div><a href="#"><img src="media/scale.jpg" alt=""></a></div>
<div><a href="#"><img src="media/scale.jpg" alt=""></a></div>
<div><a href="#"><img src="media/scale.jpg" alt=""></a></div>
</body>
</html>
案例:分页按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li {
float: left;
width: 30px;
height: 30px;
border: 1px solid red;
margin: 10px;
text-align: center;
line-height: 30px;
list-style: none;
border-radius: 50%;
cursor: pointer;
transition: all 0.4s;
}
li:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>
</html>
4.6 2D转换综合写法
注意:
- 同时使用多个转换,其格式为: transform: translate() rotate() scale()…等
- 其顺序会影转换的效果。(先旋转会改变坐标轴方向)
- 当我们同时有位移和其他属性的时候,记得要将位移放到最前
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
transition: all .5s;
}
div:hover {
/* transform: rotate(180deg) translate(150px, 50px); */
/* 我们同时有位移和其他属性,我们需要把位移放到最前面 */
transform: translate(150px, 50px) rotate(180deg) scale(1.2);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
4.7 2D转换总结
- 转换transform我们简单理解就是变形有2D和3D之分
- 我们暂且学了三个分别是位移旋转和缩放
- 2D移动translate(x, y)最大的优势是不影响其他盒子,里面参数用%,是相对于自身宽度和高度来计算的
- 可以分开写比如translateX(x)和translateY(y)
- 2D旋转rotate(度数)可以实现旋转元素 度数的单位是deg
- 2D缩放scale(x,y)里面参数是数字 不跟单位可以是小数 最大的优势不影响其他盒子
- 设置转换中心点transform-origin:x y;参数可以百分比、像素或者方位名词
- 当我们进行综合写法,同时有位移和其他属性的时候,记得要将位移放到最前
5 动画
动画(animation)
是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。
相比较过渡,动画可实现更多变化,更多控制,连续自动播放等效果。
5.1 动画的基本使用
制作动画分为两步:
- 先定义动画
- 再使用(调用)动画
1.用keyframes定义动画(类似定义类选择器)
@keyframes 动画名称 {
0% {
width: 100px;
}
100% {
width: 200px;
}
}
动画序列
- 0%是动画的
开始
,100%是动画的完成
。这样的规则就是动画序列。 - 在
@keyframes
中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果。 - 动画是使元素从一种样式逐渐变化为另一种样式的效果。我们可以改变任意多的样式任意多的
次数
。 - 用百分比来规定变化发生的时间,或用关键词"
from
"和"to
" ,等同于0%
和100%
。
2.元素使用动画
div {
width: 200px;
height: 200px;
background-color: aqua;
margin: 100px auto;
/* 2. 调用动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-duration: 持续时间;
}
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 我们想页面一打开,一个盒子就从左边走到右边 */
/* 1. 定义动画 */
@keyframes move {
/* 开始状态 */
0% {
transform: translateX(0px);
}
/* 结束状态 */
100% {
transform: translateX(1000px);
}
}
div {
width: 200px;
height: 200px;
background-color: pink;
/* 2. 调用动画 */
/* 动画名称 */
animation-name: move;
/* 持续时间 */
animation-duration: 2s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
动画序列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* @keyframes move {
from {
transform: translate(0, 0);
}
to {
transform: translate(1000px, 0);
}
} */
/* 动画序列 */
/* 1. 可以做多个状态的变化 keyframes 关键帧*/
/* 2. 里面的百分比要是整数 */
/* 3. 里面的百分比就是总的时间(10s)的划分 25% * 10 = 2.5s */
@keyframes move {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(1000px, 0);
}
50% {
transform: translate(1000px, 500px);
}
75% {
transform: translate(0, 500px);
}
100% {
transform: translate(0, 0);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
animation-name: move;
animation-duration: 10s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
5.2 动画常用属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@keyframes move {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(1000px, 0);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
/* 动画名称 */
animation-name: move;
/* 持续时间 */
animation-duration: 2s;
/* 运动曲线 */
animation-timing-function: ease;
/* 何时开始 */
animation-delay: 1s;
/* 重复次数 iteration 重复的 count次数 infinite 无限*/
/* animation-iteration-count: infinite; */
/* 是否反方向播放 默认的是normal 如果想要反方向 就写alternate */
/* animation-direction: alternate; */
/* 动画结束后的状态 默认的是backwards 回到起始状态 我们可以让它停留在结束状态 forwards */
animation-fill-mode: forwards;
}
div:hover {
/* 鼠标经过div就让这个div停止动画 鼠标离开就继续动画 */
animation-play-state: paused;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
5.3 动画简写属性
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
animation: myfirst 5s linear 2s infinite alternate;
前两个属性 name duration 一定要写
上面的例子可以这样简写:
animation: move 2s linear 0s 1 alternate forwards;
再简写:
animation: move 2s linear alternate forwards;
- 简写属性里面不包含animation-play-state
- 暂停动画: animation-play-state: puased;经常和鼠标经过等其他配合使用
- 想要动画走回来,而不是直接跳回来: animation-direction : alternate
- 盒子动画结束后,停在结束位置:animation-fill-mode:forwards
热点图案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: #333;
}
.map {
position: relative;
width: 747px;
height: 616px;
background: url(media/map.png) no-repeat;
margin: 0 auto;
}
.city {
position: absolute;
top: 227px;
right: 193px;
color: #fff;
}
.tb {
top: 500px;
right: 80px;
}
.gz {
top: 543px;
right: 191px;
}
.dotted {
width: 8px;
height: 8px;
background-color: #09f;
border-radius: 50%;
}
.city div[class^="pulse"] {
/* 保证小波纹在父盒子里面水平垂直居中 放大之后就会中心向四周发散 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
box-shadow: 0 0 12px #009dfd;
border-radius: 50%;
animation: pulse 1.2s linear infinite;
}
.city div.pulse2 {
animation-delay: 0.4s;
}
.city div.pulse3 {
animation-delay: 0.8s;
}
@keyframes pulse {
0% {
}
70% {
/* transform: scale(5); 不用scale 因为他会让阴影变大 */
width: 40px;
height: 40px;
opacity: 1;
}
100% {
width: 70px;
height: 70px;
opacity: 0;
}
}
</style>
</head>
<body>
<div class="map">
<div class="city">
<div class="dotted"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
<div class="city tb">
<div class="dotted"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
<div class="city gz">
<div class="dotted"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
</div>
</body>
</html>
效果如下图:
5.4 速度曲线细节
animation-timing-function:规定动画的速度曲线,默认是"ease"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
overflow: hidden;
font-size: 20px;
width: 0;
height: 30px;
background-color: pink;
/* 让文字强制一行显示 */
white-space: nowrap;
/* steps就是分几步来完成动画 有了steps 就不要再写ease或者linear了 */
animation: w 4s steps(10) forwards;
}
@keyframes w {
0% {
width: 0;
}
100% {
width: 200px;
}
}
</style>
</head>
<body>
<div>世纪佳缘我在这里等你</div>
</body>
</html>
奔跑的熊大案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: #ccc;
}
div {
position: absolute;
width: 200px;
height: 100px;
background: url(media/bear.png) no-repeat;
/* 元素可以添加多个动画,用逗号分隔 */
animation: bear .5s steps(8) infinite, move 3s forwards;
}
@keyframes bear {
0% {
background-position: 0 0;
}
100% {
background-position: -1600px 0;
}
}
@keyframes move {
0% {
left: 0;
}
100% {
left: 50%;
/* margin-left: -100px; */
transform: translateX(-50%);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
6 3D转换
我们生活的环境是3D的,照片就是3D物体在2D平面呈现的例子。
有什么特点
- 近大远小。
- 物体后面遮挡不可见
当我们在网页上构建3D效果的时候参考这些特点就能产出3D效果。
6.1 三维坐标系
三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的
- x轴:水平向右
注意: x右边是正值,左边是负值
- y轴:垂直向下
注意: y下面是正值,上面是负值
- z轴:垂直屏幕
注意:往外面是正值,往里面是负值
6.2 3D移动 translate3d
3D移动在2D移动的基础上多加了-一个可以移动的方向,就是z轴方向。
- translform:translateX(100px) :仅仅是在x轴上移动
- translform:translateY(100px) :仅仅是在Y轴上移动
- translform:translateZ(100px) :仅仅是在Z轴上移动(注意: translateZ一般用px单位)
- transform:translate3d(x,y,z):其中x、y、z分别指要移动的轴的方向的距离
6.3 透视 perspective
在2D平面产生近大远小视觉立体,但是只是效果二维的
- 如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)。
- 模拟人类的视觉位置,可认为安排一只眼睛去看
- 透视我们也称为视距:视距就是人的眼睛到屏幕的距离
- 距离视觉点越近的在电脑平面成像越大,越远成像越小
- 透视的单位是像素
透视写在被观察元素的父盒子上面的
d
:就是视距,视距就是一个距离人的眼睛到屏幕的距离。
z
:就是z轴,物体距离屏幕的距离,z轴越大(正值)我们看到的物体就越大。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
/* 透视写到被观察元素的父盒子上面 */
perspective: 200px;
}
div {
width: 200px;
height: 200px;
background-color: pink;
/* transform: translateX(100px);
transform: translateY(100px); */
transform: translateX(100px) translateY(100px) translateZ(100px);
/* 1. translateZ沿着Z轴移动 */
/* 2. translateZ 后面的单位一般用px */
/* 3. translateZ(100px) 向外移动100px(向我们的眼睛来移动) */
/* 4. 3D移动有简写的方法 */
/* transform: translate3d(x,y,z); */
/* transform: translate3d(100px, 100px, 100px); */
/* 5. xyz是不能省略的 如果没有就写0*/
transform: translate3d(400px, 100px, 100px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
6.4 translateZ
transform:translateZ(100px):仅仅是在Z轴上移动。有了透视,就能看到translateZ引起的变化了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
perspective: 500px;
}
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transform: translateZ(0);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
6.5 3D旋转rotate3d
3D旋转指可以让元素在三维平面内沿着x轴,y轴,z轴或者自定义轴进行旋转。
语法
- transform:rotateX(45deg) :沿着x轴正方向旋转45度
- transform:rotateY(45deg) : 沿着y轴正方向旋转45deg
- transform:rotateZ(45deg) :沿着Z轴正方向旋转45deg
- transform:rotate3d(x,y,z,deg):沿着自定义轴旋转deg为角度
对于元素旋转的方向的判断我们需要先学习一个左手准则。
左手准则
- 左手的手拇指指向x轴的正方向
- 其余手指的弯曲方向就是该元素沿着x轴旋转的方向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
perspective: 300px;
}
img {
display: block;
margin: 100px auto;
transition: all 1s;
}
img:hover {
transform: rotateX(180deg);
}
</style>
</head>
<body>
<img src="media/pig.jpg" alt="">
</body>
</html>
- 左手的手拇指指向y轴的正方向
- 其余手指的弯曲方向就是该元素沿着y轴旋转的方向(正值)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
perspective: 500px;
}
img {
display: block;
margin: 100px auto;
transition: all 1s;
}
img:hover {
transform: rotateY(45deg);
}
</style>
</head>
<body>
<img src="media/pig.jpg" alt="">
</body>
</html>
transform:rotate3d(x,y,z,deg):沿着自定义轴旋转deg为角度
xyz是表示旋转轴的矢量,是标示你是否希望沿着该轴旋转,最后一个标示旋转的角度。
- transform:rotate3d(1,0,0,45deg)就是沿着x轴旋转45deg
- transform:rotate3d(1,1,0,45deg)就是沿着对角线旋转45deg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
perspective: 500px;
}
img {
display: block;
margin: 100px auto;
transition: all 1s;
}
img:hover {
/* transform: rotateZ(180deg); */
/* transform: rotate3d(x,y,z,deg); */
/* transform: rotate3d(1, 0, 0, 45deg); */
transform: rotate3d(0, 1, 0, 45deg);
}
</style>
</head>
<body>
<img src="media/pig.jpg" alt="">
</body>
</html>
6.6 3D呈现transform-style
- 控制子元素是否开启三维立体环境。
- transform-style: flat子元素不开启3d立体空间 默认的
- transform-style: preserve-3d;子元素开启立体空间
- 代码写给父级,但是影响的是子盒子
- 这个属性很重要,后面必用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
perspective: 500px;
}
.box {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
transition: all 2s;
/* 让子元素保持3d立体空间环境 */
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(60deg);
}
.box div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: pink;
}
.box div:last-child {
background-color: purple;
transform: rotateX(60deg);
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
</div>
</body>
</html>
两面翻转的盒子
- 搭建HTML结构
<div class="box">
<div class="front">yayazi</div>
<div class="back">爱你哟</div>
</div>
- box父盒子里面包含前后两个子盒子
- box是翻转的盒子 front是前面盒子 back是后面盒子
- CSS样式
- box指定大小,切记要添加3d呈现
- back盒子要沿着Y轴翻转180度
- 最后鼠标经过box沿着旋转180deg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
position: relative;
width: 300px;
height: 300px;
margin: 100px auto;
transition: all .6s;
/* 让背面的紫色盒子保留立体空间 给父级添加的*/
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(180deg);
}
.front,
.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
font-size: 30px;
color: #fff;
text-align: center;
line-height: 300px;
}
.front {
backface-visibility: hidden;
background-color: pink;
z-index: 1;
}
.back {
background-color: purple;
/* 像手机一样 背靠背 旋转 */
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="box">
<div class="front">yayazi</div>
<div class="back">爱你哟</div>
</div>
</body>
</html>
3D导航栏
- 搭建HTML结构
<ul>
<li>
<div class="box">
<div class="front">yayaaya</div>
<div class="bottom">hhhhh</div>
</div>
</li>
</ul>
- li做导航栏
- .box是翻转的盒子front是前面盒子bottom是底下盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
margin: 100px;
}
ul li {
float: left;
margin: 0 5px;
width: 120px;
height: 35px;
list-style: none;
text-align: center;
/* 一会需要给box旋转 也需要透视 干脆给li加 里面的子盒子都有透视效果 */
perspective: 500px;
}
.box {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all .4s;
}
.box:hover {
transform: rotateX(90deg);
}
.front,
.bottom {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.front {
background-color: pink;
z-index: 1;
transform: translateZ(17.5px);
}
.bottom {
background-color: purple;
/* 这个x轴是负值 */
/* 如果有移动 或者其他样式 必须先写移动 */
transform: translateY(17.5px) rotateX(-90deg) ;
}
</style>
</head>
<body>
<ul>
<li>
<div class="box">
<div class="front">yayaya</div>
<div class="bottom">hhhh</div>
</div>
</li>
<li>
<div class="box">
<div class="front">yayaya</div>
<div class="bottom">hhhh</div>
</div>
</li>
<li>
<div class="box">
<div class="front">yayaya</div>
<div class="bottom">hhhh</div>
</div>
</li>
<li>
<div class="box">
<div class="front">yayaya</div>
<div class="bottom">hhhh</div>
</div>
</li>
</ul>
</body>
</html>
7 H5C3综合案例
案例:旋转木马
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
perspective: 1000px;
}
section {
position: relative;
width: 300px;
height: 200px;
margin: 150px auto;
transform-style: preserve-3d;
/* 添加动画效果 */
animation: rotate 10s linear infinite;
background: url(media/pig.jpg);
}
section:hover {
/* 鼠标放入section 停止动画 */
animation-play-state: paused;
}
@keyframes rotate {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(360deg);
}
}
section div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(media/dog.jpg) no-repeat;
}
section div:nth-child(1) {
transform: rotateY(0) translateZ(300px);
}
section div:nth-child(2) {
/* 先旋转好再移动 */
transform: rotateY(60deg) translateZ(300px);
}
section div:nth-child(3) {
/* 先旋转好再移动 */
transform: rotateY(120deg) translateZ(300px);
}
section div:nth-child(4) {
/* 先旋转好再移动 */
transform: rotateY(180deg) translateZ(300px);
}
section div:nth-child(5) {
/* 先旋转好再移动 */
transform: rotateY(240deg) translateZ(300px);
}
section div:nth-child(6) {
/* 先旋转好再移动 */
transform: rotateY(300deg) translateZ(300px);
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>
效果如下:
8 浏览器私有前缀
浏览器私有前缀是为了兼容老版本的写法,比较新版本的浏览器无须添加。
- 私有前缀
- -moz- :代表firefox浏览器私有属性
- -ms- :代表ie浏览器私有属性
- -webkit- :代表safari、chrome私有属性
- -o- :代表Opera私有属性
- 提倡的写法
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;