375~407(2D+动画+3D+浏览器私有前缀)
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;
375~407(2D+动画+3D+浏览器私有前缀)相关推荐
- CSS3新特性(属性选择器 、结构伪类选择器、2D/3D转换、动画、浏览器私有前缀)
这里写目录标题 一.CSS3 属性选择器 二.CSS3 结构伪类选择器 三. CSS3 伪元素选择器 四.CSS3 2D转换 1.2D 转换之移动 translate 2.2D 转换之旋转 rotat ...
- css3中animation动画、浏览器私有前缀、文字阴影
animation动画: 可以设置多个节点来控制一个或 一组动画,动画可以实现更多变化,更多控制,连续自动播放等效果.动画的使用分两步:1.定义动画 2.调用动画(调用必须写调用名称和持续时间),其属 ...
- HTML5 和 CSS3 提高篇 下 2D转换 transform(移动、旋转、缩放、中心点、综合写法);动画(animation);3D转换;浏览器私有前缀;背景色线性渐变
------ 2D 转换(transform)移动.旋转.缩放.中心点 ------- 转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.缩放等效果 转换(tran ...
- CSS系列之浏览器私有前缀
文章の目录 1.私有前缀 2.提倡写法 写在最后 浏览器私有前缀是为了兼容老版本的写法,比较新版本的浏览器无须添加. 1.私有前缀 -moz-:代表 firefox 浏览器私有属性 -ms-:代表 i ...
- -moz、-ms、-webkit浏览器私有前缀详解,作用、出处
名称 私有前缀 作用 为了兼容老版本的写法.例如:比较新版本的浏览器都支持直接写:border-radius. -moz代表firefox浏览器私有属性,-ms代表ie浏览器私有属性,-webkit代 ...
- HTML5简介(补充. 浏览器私有前缀)
浏览器私有前缀是为了兼容老版本的写法,比较新版本的浏览器无须添加. 1. 私有前缀 2. 提倡的写法 -moz-border-radius: 10px; -webkit-border-radius: ...
- 2D转换 + 动画 + 3D转换
1. 2D 转换 转换(transform)是CSS3中最具有颠覆性的特性之一,可以实现元素的位移.旋转.缩放等效果 移动:translate 旋转:rotate 缩放:scale 1.1 二维坐标系 ...
- CSS学习(五)—— 背景与渐变、2D与3D的转换
八.背景与渐变 1.背景基础知识 1) 背景颜色基础知识 background-color 属性表示背景颜色,颜色可以用十六进制.rgb().rgba()表示法进行表示 注:padding区域是由背景 ...
- 2D转换+动画+3D转换
文章目录 2D转换 translate 实现盒子的竖直和水平居中 rotate origin 缩放scale 综合写法 渐变 动画 动画序列 基本使用 动画属性 3D转换 3D移动translate3 ...
最新文章
- C语言通过函数参数不能带出动态内存的例子。
- linux配置usb主从_杂集:浅谈关于Mongodb数据库主从复制
- java calendar_Java Calendar complete()方法与示例
- html/css小练习2
- linux中df和ls区别,linux系统文件大小ls、df、du命令的区别
- java单元测试的编写及运行方法
- unix环境高级编程(第三版)-读书笔记1
- 点云处理学习笔记(八)-- 点云配准
- 操作无法完成 因为文件已在system中打开
- 打开GTA 5竟要跑19.8亿次if语句!黑客嘲讽R星代码烂,修改后直接省70%加载时间...
- Unrecognized field ResultCode (class com.xiaocaimi.loan.pojo.vo.LiuLiuYuResponse), not marked as i
- [深度学习论文笔记]UCTransNet:从transformer的通道角度重新思考U-Net中的跳跃连接
- Linux系统学习方法论 1
- matlab icol,人脸识别-2dpca之Matlab程序
- charging hw bq25601充电驱动笔记
- 微信小程序获取手机号,TP6 后端电话短信验证
- 改进YOLOv7系列:首发结合最新Centralized Feature Pyramid集中特征金字塔,通过COCO数据集验证强势涨点
- ubuntu系统中用c语言编写简单程序
- mysql外键约束的作用_如何在MySQL中设置外键约束以及外键的作用
- 图书推荐|计算机组成与设计(原书第5版) 硬件软件接口 RISC-V