CSS3 позволяет производить перемещение, масштабирование, повороты и наклоны блоков без использования JavaScript. Для этого используется своство transform, которому передается одно или несколько действий через пробел. Порядок следования трансформации важен, так как при разном порядке могут получаться разные результаты.

tranform: действие(...);

Свойство transform-origin задает точку отсчета системы координат, от которой будет работать трансформация (по умолчанию равна 50% 50% = центр объекта).

transform-origin: точка-отсчета-по-X [, точка-отсчета-по-Y];

Подключение пользовательских веб-шрифтов производится с помощью CSS-правила @font-face. Можно хранить шрифты и подключать их со своего сервера или использовать

@font-face {
    font-family: "Roboto";
    src:
        local("Roboto Regular"),
        url("/assets/roboto.woff") format("woff");
}

Тени для текста создаются с помощью CSS-свойства text-shadow.

Линейные градиенты — это плавный переход от одного цвета к другому. Градиенты описываются внутри CSS-свойстваbackground-image. Примеры использования:

background-image: linear-gradient(to left bottom, yellow, green);
background-image: linear-gradient(-90deg, red, yellow, green);
background-image: linear-gradient(red 50%, yellow 50%, green 100%); /* колорстопы, % либо px */
background-image: linear-gradient(red 50px, yellow 50px, rgba(0, 255, 0, 0.5) 100px);
background-image: 
    linear-gradient(...),
    linear-gradient(...);
background-image: repeating-linear-gradient(red 0px, red 25px, yellow 25px, yellow 50px, green 50px, green 75px); /* повторяющийся резкий градиент */

Свойство border-radius позволяет закруглять углы элементов. Свойства border-top-left-radius, border-top-right-radius,border-bottom-right-radius и border-bottom-left-radiusпозволяют закруглять отдельные углы. Можно задать разные горизонтальные и вертикальные радиусы:

border-radius: 50%;
border-radius: 10px 20px; 
border-radius: 10px 20px 30px; 
border-radius: 10px 20px 30px 40px;
border-bottom-right-radius: 10px; /* отдельный угол */
border-top-left-radius: 10px 30px; /* горизонтальные и вертикальные радиусы */
border-radius: 10px 20px 30px 40px / 5px 15px 25px 35px; /* разные радиусы у каждого угла */

Задать фоновое изображение для рамки блока можно с помощью свойств:

Кроме основных свойств работы с фоном, в CSS3 есть ряд новых возможностей.

Cвойствоbackground-size задает размеры фонового изображения. Значения:
300px auto — первый — это ширина фонового изображения, второй — высота;
contain — изображение полностью помещается в границы фона, но может не закрывать весь фон;
cover — изображение закроет всю фоновую область, но часть изображения может обрезаться;