box-size : width **
내부 여백이 어떻게 변경 되더라도 상자의 크기는 항상 너비와 같기 때문에 내부 여백을 늘리거나 줄인 후 상자가 늘어 났는지 여부를 계산할 필요가 없습니다.
필터 : 흐림 (5px)
사진 필터, css3는 필터 효과를 추가합니다. 괄호 안의 값이 클수록 사진이 더 흐려집니다.
width : calc (100 % -30px)
는 상자의 너비와 높이를 자동으로 계산하고 외부 세계의 변화에 따라 크기를 동적으로 변경하여 해당 효과를 만드는 데 사용할 수 있습니다.
css3 이상
전환 : 속성 전환 시간 전환 방법 (기본 용이성) 시작 시간 전환
효과는 종종 hover와 함께 사용되며, 마지막 두 속성은 선택 사항 일 수 있으며 처음 두 속성은 필수입니다.
div:{
width:100px;
transiton：width 1.5s；
}
div:hover {
width:400px;
}
상자 너비가 원래에서 400px
로 변경되었습니다. hover에서 여러 속성을 함께 변경해야하는 경우 1.5 초가 걸리며 모두를 사용하여 첫 번째 속성을 작성할 수 있습니다. 속성 변경을 지정해야하는 경우. transiton：width 1.5s，height 1.5s；여러 전환 은 쉼표로 구분할 수 있습니다 .
2D 변환
변형 ： 번역 （x, y）
번역은 상자를 이동하는 데 사용됩니다.
번역의 매개 변수는 백분율이 될 수 있지만 백분율은 화면의 백분율에 따라 계산되지 않고 자체 상자의 백분율에 따라 계산됩니다.
번역은 인라인 태그에 영향을주지 않습니다.
div:{
width:100px;
transform：translate（100px,150px）；
}
* 번역의 가장 큰 장점 은 변형시 다른 상자에 영향을주지 않는다는 점이며, 어떻게 상하하든 인접한 상자와는 무관합니다.
상자 변형에서 상자 이동에 사용되는 속성의 두 매개 변수는 각각 x 축과 y 축의 오프셋에 해당합니다. 사용하기 전에 웹 페이지의 xy 축이 우리 생활과 다르다는 것을 이해해야합니다. , 웹 페이지의 y 축 축은 아래쪽으로 전개되고 y 값은 아래쪽으로 갈수록 증가합니다.
레이아웃에서는 종종 다음과 같은 효과를 사용합니다. 제품 라인을 정렬하여 표시 할 때 특정 제품에 마우스를 올려 놓으면 제품이 떠 다니는 느낌이 들며이 스타일 변환을 사용할 수 있습니다.
div:hover{
transform：translate（0,-5px）；
}
trasform : rotate (x deg)
rotate는 상자를 회전하는 것이며, 상자가 45도 회전하도록하려면 속성 단위가 deg 도로 정의됩니다.
다음을 수행 할 수 있습니다.
transform：rotate（45deg）；
경우 생성 : 주목해야한다
각도가 양,이 시계 방향으로 회전하며, 각이 음수 인 경우, 반 시계 방향으로 회전한다.
기본 회전의 중심점은 요소 중심점입니다.
경우에 따라 상자 뒷면에 작은 삼각형 아이콘을 추가해야합니다. 과거에는 아이콘 만 사용하고 글꼴 아이콘을 사용하여 만들 수있었습니다. 이제 회전을 통해 할 수 있습니다. 작은 상자를 선택하고 아래쪽 테두리와 테두리 만 정의하면 45도 회전하여 이루어집니다. 물론 css3, :: after에서 가상 요소 선택기를 결합한 다음 블록 수준 요소로 변환하고 너비와 높이를 정의하고 위치를 구현할 수 있습니다.
div::after{
content:"";
display:block;
width:10px;
height:10px;
transform:(45deg);
border-bottom:1px solied #000;
border-right:1px solied #000;
transition:all 0.4s;
}
div:hover::after{
transform:rotate(180deg);
}
변환 출처
회전의 중심점을 설정하는데 사용할 수 있습니다. 속성의 매개 변수는 px, 퍼센트, 방향 명사 , 픽셀은 좌표축에 따라 해당 점을 찾아 중심점으로 설정하는 세 가지 형태 가 있습니다. 백분율은 여전히 자체 크기의 백분율에 따라 계산됩니다. 기본값은 50 % 50 %입니다. 위치 명사는 왼쪽, 오른쪽 등을 포함합니다.
transform : scale (x, y)는
상자의 크기를 조절하는 데 사용됩니다. 속성 매개 변수의 단위는 제한되지 않습니다. px 또는 다중 크기 조절이 될 수 있습니다. 매개 변수를 하나만 작성하면 너비와 높이를 조절해야 함을 의미합니다. 그 기능 양식화 된 width : xxx; height : xxx;의 효과는 과도한 효과와 거의 동일하지만 배율 사용의 장점은 기본적으로 중심점에서 배율이 조정되고 다른 상자에 영향을주지 않는다는 것입니다.
transform：scale（2，2）； //盒子宽高变为原来的两倍
transform：scale（3）； //盒子宽高同时变为原来的三倍
transform：scale（0.5，0.5）； //盒子宽高变为原来的一半
transform：scale（0.6）； //盒子宽高同时变为原来的0.6倍
사례 :
마우스가 상자 위로지나 가면 상자 안의 그림이 확대되는 효과가 나타나며 다른 요소의 위치에 영향을주지 않도록 배율을 선택하여 진행할 수 있습니다.
div {
width:100px;
height:100px;
overfolw:hidden;
}
div img {
transition:all .4s;
}
div img:hover {
transform:scale(1.1);
}
요약
2D 전환은 포괄적으로 작성할 수 있지만 움직임을 맨 위에 놓아야합니다. 그렇지 않으면 효과가 우리의 상상과 다를 것입니다.
css3 애니메이션
애니메이션의 사용은 2D 트랜지션보다 화려하고 편리합니다 .. 우리는 애니메이션 효과를 보통 두 부분,
1. 애니메이션 정의 2. 애니메이션 사용
@keyframes move {
/*开始状态*/
0%：{
transform： translate（0，0）；
}
/*结束状态*/
100%：{
transform： translate（1000px，0）；
}
}
div{
width：150px；
height;150px;
background:pink;
/*动画名称*/
animation-name:move;
/*动画时间*/
animation-duration:2s
}
@ keyframes xxx 를 사용하여 애니메이션을 정의합니다. 이름은 임의로 정의 할 수 있습니다. 정의의 가장 중요한 두 가지 속성은 애니메이션의 시작 상태와 종료 상태를 나타내는 것입니다. 그런 다음 누가 누가 정의하는지 원칙에 따라 animation-name : xxx 및 animation-duration 을 사용하여 애니메이션을 사용해야하는 상자에 애니메이션 이름 과 애니메이션 기간 을 지정합니다.
물론 애니메이션에 시작과 끝의 두 가지 상태 만있는 경우 각각 0 %와 100 % 대신 from과 to를 사용할 수 있습니다.
애니메이션에 다중 상태 요구 사항이있는 경우 0 %, 25 %, 75 %, 100 % 등의 백분율을 사용할 수 있지만 가장 중요한 것은 시작 및 종료 상태를 정의하는 것입니다.
애니메이션 속성 :
1.@keyframes //定义属性
2.animation-name //定义使用动画名
3.animation-duration //定义动画时长
4.animation-delay //定义动画何时开始
5.animation-iteration-count //定义播放次数，默认为1，参数infinite表示无限播放
6.animation-direction //定义动画周期结束后是否还反方向播放，默认为normal，如果要反方向则需要参数alternate
7.animation-fill-mode //定义动画播放后的状态，是否回到起始位置，默认是backwards,若不返回则需要参数forwards
8.animation-play-state //定义动画是否暂停，参数为paused，常搭配：hover来使用。
짧은 형식:
animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始/结束位置
모션 곡선
ease //先匀速后减速
linear //保持匀速
steps（n） //保持步长，按规定的次数完成
3D 변환
3D 변환을 배우고 싶다면 가장 먼저 이해해야 할 것은 프론트 엔드 3D 계획입니다.
transform-translate3d : (x, y, z)는
3 차원 공간에서 상자를 이동하는 데 사용되며 그 사용법은 2d 이동과 유사합니다.
원근
3D 원근 효과는 3D 눈으로 이해할 수 있습니다. 그를 통해서만 3D 효과를 볼 수 있습니다. 일반적으로 우리는 거의 큰-아주 작은 효과를 고수하면서 부모 상자에 추가해야합니다. 매개 변수, 상자가 커질수록 매개 변수의 단위는 px입니다.
transform-rotate3d (x, y, z, deg);
이것은 3d 기반 회전입니다. 회전해야하는 사람은 해당 위치에 1을 씁니다. 물론 여러 값이있는 경우 회전 할 최종 축은 다음과 같이 계산됩니다. 벡터 연산에.
세 개의 다른 축을 따라 순차적으로 회전 할 수 있으며, 부모 상자에 원근감을 추가하면 3D 회전의 효과가 더욱 분명해집니다.
transform-rotateX（xdeg）; //以x轴做旋转
transform-rotateY（ydeg）; //以y轴做旋转
transform-rotateZ（zdeg）; //以z轴做旋转
transform-style은
하위 상자에 대해 3D 모드를 켤지 여부를 제어하는 데 사용됩니다. 기본적으로 켜져 있지 않으며 수동으로 설정해야합니다.
transform-style：preserve-3d
개인 접두사 요약
